How to Add Intaker to Accelerated Mobile Pages
In this article you will learn how to use accelerated mobile pages to make your website faster and improve your SEO ranking.
What is an accelerated mobile page?
An accelerated mobile page is an HTML framework developed by Google that improves web page performance on mobile devices. Accelerated mobile pages (AMPs) work by stripping a page to its most essential parts, making it faster. It benefits SEO and overall website performance. Visitors prefer sites that maximize efficiency.
How to Add Intaker to AMPs
To optimize site performance, you need to add the Intaker chat in its simplest format, without custom Javascript. You can remove Intaker regular script from AMPs and replace it with a simple sticky button that opens our chat by linking it to the chat landing page directly without any need for JS.
Here is an example of an AMP-friendly sticky button implemented by our team on a sample page:
------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta charset="UTF-8">
<title>Widget-Intaker</title>
<style type="text/css">
.icw--ready{
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
padding: 10px;
position: fixed;
z-index: 2147482900;
bottom: 20px;
right: 23px;
}
#icw--launcher {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row-reverse;
margin: 0 -5px;
z-index: 2147482998;
text-decoration: none !important;
}
.icw--launcher--avatar {
align-items: center;
position: relative;
}
.icw--launcher--avatar:after {
background-color: #2ecc71;
border: 2px solid #fff;
border-radius: 50%;
bottom: 3px;
box-sizing: border-box;
content: "";
height: 18px;
position: absolute;
right: 7px;
width: 18px;
}
.icw--launcher--avatar img {
box-shadow: 0 0 35px rgb(60 60 60 / 60%);
display: block;
height: 100px;
width: 100px;
border-radius: 50%;
}
.icw--launcher--text {
background-color: #fff !important;
border-radius: 0.625rem !important;
box-shadow: 0 0 35px rgb(60 60 60 / 60%);
font-size: 15px !important;
font-weight: 400;
margin: 0 11px;
max-width: 300px;
overflow: visible !important;
padding: 8px 10px;
position: relative;
text-overflow: ellipsis;
white-space: normal;
}
.icw--launcher--text--onlytxt {
color: #272727;
max-width: 210px;
white-space: wrap;
}
#icw--avatar-direct-link {
background-image: url("HTTPS://INTAKER.AZUREEDGE.NET/NEW-DASHBOARD/ICONSCHAT/OPENTABWITHSHADOW.SVG");
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
bottom: -38px;
cursor: pointer;
display: inline-block;
height: 42px;
position: absolute;
right: -7px;
width: 42px;
}
.icw--launcher--text:after {
border: 8px solid;
border-color: transparent transparent transparent #fff !important;
bottom: auto;
content: " ";
height: 0;
left: auto;
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
}
</style>
</head>
<body>
<div class="icw--ready">
<a id="icw--launcher" href="HTTPS://WWW.INTAKER.COM/ORG/BOT" target="_blank">
<div id="icw--avatar-container" class="icw--launcher--item icw--launcher--avatar ">
<img src="https://intaker.blob.core.windows.net/bot-avatar/5-1655757733.png" width="100" height="100" alt="">
</div>
<div class="icw--launcher--item icw--launcher--text">
<div class="icw--launcher--text--onlytxt"> 👋🏼 How can I help you?</div>
<i id="icw--avatar-direct-link"></i>
</div>
</a>
</div>
</body>
</html>
————————
To change the bot link copy the code from inside the Intaker dashboard. You will navigate to the bots section and select the bot whose code you'd like to add to the accelerated mobile page. You will then insert it into the code where it says "HTTPS://WWW.INTAKER.COM/ORG/BOT" by replacing the current text with your custom link.
Pro Tip:
You can change the image source to any URL in order to show a different headshot. To do this, you'll be changing the link in the text next to "<img src=" in the code above. It's located four lines below where you enter the bot link.
