diff --git a/static/css/channels.css b/static/css/channels.css index 0c5aa593..ad21fdfc 100644 --- a/static/css/channels.css +++ b/static/css/channels.css @@ -203,6 +203,38 @@ table.channels-table > tbody > tr > th { font-weight: 300; } +.ai-step .marker-wrap { + position: relative; + clear: both; +} + +.ai-step .marker { + width: 20px; + height: 20px; + margin-left: -10px; + margin-top: -10px; + background: #2abb66; + position: absolute; + border-radius: 10px; + opacity: 0; + animation: marker-ripple 1.2s ease-out infinite; +} + +@keyframes marker-ripple { + 0%, 35% { + transform: scale(0); + opacity: 0.5; + } + 50% { + transform: scale(1.5); + opacity: 0.3; + } + 100% { + opacity: 0; + transform: scale(4); + } +} + .ai-guide-screenshot { max-width: 100%; border: 6px solid #EEE; diff --git a/templates/integrations/add_pagertree.html b/templates/integrations/add_pagertree.html index 3e2991ee..e3ebef2c 100644 --- a/templates/integrations/add_pagertree.html +++ b/templates/integrations/add_pagertree.html @@ -24,10 +24,13 @@

- Click create integration button +
+ + Click create integration button +
@@ -50,16 +53,20 @@
3

- Copy the Endpoint URL and paste it + Copy the Endpoint address and paste it in the form below. Save the integration, and you are done!

- Copy the Webhook URL +
+ + + Copy the Webhook URL +