INSTRUCTIONS FOR ADDING YOUR SMS CHAT CODE

Author March 17, 2024 2 minute read

Instructions:

Please insert the following code on each page of the mobile site.

We recommend installing the code near the top of the website because it will be the first thing the visitor sees when visiting the site, and a reminder from page to page as the visitor browses the site.

Feel free to install the code in any location which best suits the design of the website. We typically recommend installing the code within the header area, right above the 1st <body> tag.

Here are 4 Options for html version:

Option 1 Html with blue underline link

<a href="sms:1 XXXXXXXXXX" style="color: #0000ff; text-decoration: underline; cursor: pointer; font-family: Verdana,Geneva,sans-serif; font-size: 16px; font-weight: bold;">Text Us! 123-456-7890</a>

Option 2 Html with button style

<a href="sms:1XXXXXXXXXX" style="background-color:#ee4235;-moz-border-radius:7px;-webkit-border-radius:7px; border-radius:7px; border:1px solid #cd362e; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:16px; font-weight:bold; padding:10px 20px; text-decoration:none; text-shadow:1px 1px 0px #cd362e;">Text Us! 123-456-7890</a>

Option 3 Html with Blue Gradient style

<a href="sms:1 XXXXXXXXXX" style="border: 1px solid #0a3c59; background: #3e779d; background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); background: -webkit-linear-gradient(top, #65a9d7, #3e779d); background: -moz-linear-gradient(top, #65a9d7, #3e779d); background: -ms-linear-gradient(top, #65a9d7, #3e779d); background: -o-linear-gradient(top, #65a9d7, #3e779d); background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%); padding: 10.5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #7ea4bd 0 1px 0; color: #ffffff; font-size: 14px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; display:inline-block">Text Us! 123-456-7890</a>

Option 4 Html with Red Gradient style

<a href="sms:1XXXXXXXXXX" style=" border: 1px solid #521620; background: #b3342d; background: -webkit-gradient(linear, left top, left bottom, from(#ee4235), to(#b3342d)); background: -webkit-linear-gradient(top, #ee4235, #b3342d); background: -moz-linear-gradient(top, #ee4235, #b3342d); background: -ms-linear-gradient(top, #ee4235, #b3342d); background: -o-linear-gradient(top, #ee4235, #b3342d); background-image: -ms-linear-gradient(top, #ee4235 0%, #b3342d 100%); padding: 10.5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #611515 0 1px 0; color: #ffffff; font-size: 13px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; display:inline-block">Text Us! 123-456-7890</a>