Add Live Chat for Google AMP (Accelerated Mobile Pages)
This document explains how to add Juvo Leads live chat to your Google AMP pages. All options below are variations on the same idea, you are simply using a hyperlink to send traffic back to your website and then triggering the chat widget to pop-up as as son as the user lands on your website. The hyperlink can be styled as a footer bar, side tab, or you can use a normal link or button.
When copying/pasting the hyperlink code below, just make sure the hyperlink points back to your website and includes #start-chat at the end of the URL. This forces the chat to open up when the user reaches your website. The additional benefit of this method, is that if the user chooses to close the chat they will now be able to view the rest of your website.
Step 1 – Add the following CSS to your stylesheet:
.juvo_amp_bar{color:#fff;background-color:#1e5f96;font-family:Open Sans,Sans-Serif;font-size:12px;font-weight:700;text-align:center;text-decoration:none;width:100%;height:45px;line-height:45px;position:fixed;left:0;bottom:0;box-shadow:5px -2px 5px #888;z-index:99999}
.juvo_amp_tab{color:#fff;background-color:#1e5f96;font-family:Open Sans,Sans-Serif;font-size:14px;font-weight:700;text-align:center;text-decoration:none;height:48px;line-height:42px;position:fixed;top:50%;z-index:99999;border-radius:3px;padding-left:10px;padding-right:10px;right:0;transform:translateX(46%) translateY(-50%) rotate(-90deg)!important;margin-right:10px!important}
Step 2 – Add HTML (hyperlink) inside your <body></body> code. There are 3 options available:
A) Footer Bar
Include the following HTML (hyperlink) anywhere inside the <body></body> tags of your website. Remember to modify the your-website.com with your actual website URL.
<a class="juvo_amp_bar" href="https://your-website.com/#start-chat">START CHAT</a>
B) Side Bar
<a class="juvo_amp_tab" href="https://your-website.com/#start-chat">START CHAT</a>
C) Normal Hyperlink
<a href="https://your-website.com/#start-chat">Start Chat</a>
That’s it! You’re done. Any questions or if you need assistance please reach out to your account rep. We’re here to help!