Adding Chat Invitations to AMP Websites
If your website uses Accelerated Mobile Pages you can add chat invitations to your websites. We have two options for AMP websites – BAR and TAB. Please reach out to your account representative via email at [email protected] for the company ID.
Instructions for adding the BAR or TAB invites to your AMP website are below:
1. BAR
a) Place the following code within the <body></body> tag:
<a class=”apexchat_amp_bar” href=”https://apex.live/pages/chat.aspx?companyId=XXXX”>
START CHAT
</a>
b) Add this CSS to the stylesheet:
.apexchat_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; /* Change this to top: 0; To make it a top bar */ box-shadow: 5px -2px 5px #888888; z-index: 99999; }
2. TAB
a) Place the following code within the <body></body> tag:
<a class=”apexchat_amp_tab” href=”https://apex.live/pages/chat.aspx?companyId=XXXX”>
START CHAT
</a>
b) Add this CSS to the stylesheet:
.apexchat_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: 0px; transform: translateX(46%) translateY(-50%) rotate(-90deg) !important; margin-right: 10px !important; }
You can download html code files below.
Sorry, the comment form is closed at this time.