Use ripple effect instead of arrows in setup instruction screenshots

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;

templates/integrations/add_pagertree.html

@@ -24,10 +24,13 @@
             </p>
         </div>
         <div class="col-sm-6">
-            <img
+            <div class="marker-wrap">
-                class="ai-guide-screenshot"
+                <span style="left: 89%; top: 19%;" class="marker"></span>
-                alt="Click create integration button"
+                <img
-                src="{% static 'img/integrations/setup_pagertree_1.png' %}">
+                    class="ai-guide-screenshot"
+                    alt="Click create integration button"
+                    src="{% static 'img/integrations/setup_pagertree_1.png' %}" />
+            </div>
         </div>
       </div>
 
@@ -50,16 +53,20 @@
           <div class="col-sm-6">
               <span class="step-no">3</span>
               <p>
-                Copy the <strong>Endpoint URL</strong> and paste it
+                Copy the <strong>Endpoint address</strong> and paste it
                 in the form below.
                 Save the integration, and you are done!
               </p>
           </div>
           <div class="col-sm-6">
-              <img
+            <div class="marker-wrap">
-                  class="ai-guide-screenshot"
+                <span style="left: 32%; top: 59%;" class="marker"></span>
-                  alt="Copy the Webhook URL"
+
-                  src="{% static 'img/integrations/setup_pagertree_3.png' %}">
+                  <img
+                      class="ai-guide-screenshot"
+                      alt="Copy the Webhook URL"
+                      src="{% static 'img/integrations/setup_pagertree_3.png' %}">
+            </div>
           </div>
       </div>