Customizer: Adding a Chat Widget to Your Site [Codeless]

Sarah Updated by Sarah

This article will walk you through how to add a chat widget to your site using the Javascript editor. 

What is a Chat Widget?

A chat widget is a tool you can add to your site as another means of reaching out to your client base.  If you are present, you can have a real-time conversation with leads that are looking at your site. If you are not available, the widget will automatically engage leads with programmed questions and responses.  These conversations will be logged and sent to you so you can follow up with potential clients.

java2.png

Adding a Chat Widget

You can find a chat widget by simply running a Google search for the terms “chatbot”  or “chat widget”. You can either pay for a chat widget or obtain a free code. Many chat widgets offer the same service, however, keep in mind that free widgets tend to require more set up and do not offer as much support as the paid versions. Some free widgets we recommend are tawk.to  and rebot.me and drift.com. A popular paid chat program is provided by Zendesk.   

Obtaining your Chat Widget Code

Once you have selected the widget you would like to use, you will need to obtain the embed code for the widget. For demonstration purposes, we will be using the widget from rebot.me. All other chat box widgets should follow a similar process.  If you run into any difficulty finding the code, you should contact the program’s support team for more information.

Once you have set up your chat widget, look for the “embed” option.

java3.png

This will display the code that you will need to embed the widget on your Placester site.

java4.png

This code should look something like this:

       <script type="text/javascript">

var headID = document.getElementsByTagName("head")[0];

var newCss = document.createElement('link');

newCss.rel = 'stylesheet';

newCss.type = 'text/css';

window._botUsername = '658495';

window._botName = 'Jane Stevens';

newCss.href = "http://rebot.me/assets/css/bot.css";

var newScript = document.createElement('script');

newScript.src = "http://rebot.me/assets/js/bot.js";

newScript.type = 'text/javascript';

headID.appendChild(newScript);

headID.appendChild(newCss);

</script>

Note: If the code looks significantly different, please reach out to our support team to double check that it will work on the site.

Adding Chat Widget Code to Placester

To access the Javascript editor from your Dashboard, click on “Edit Site.” 

From here, select “Template Options” on the menu to the left.

Under Template Options, select “Custom JS.”

 

Under the “Custom JS” section, select the box to the left of “Are you sure you want to enable Custom JS?”

Now, paste the code into the Javascript editor box. 

The code must now be modified in order for the widget to function on your Placester site. To do this, remove the first and last line from the code. These lines should look something like,

<script type=”text/javascript’>

and

</script>

Once you have made the necessary adjustments to your code, click “Publish.”

You should now be able to view the chat box widget on your Placester site!

Need More Help?

If you have additional questions about adding a chat widget to your Placester site, let our support team know at support@placester.com.

How did we do?

Customizer: Using Custom Lead Capture[Codeless]

Customizer: Editing an Existing Page [Codeless]

#

Let experts do it for you

Receive your finished work, take a minute to do a happy dance, and reply with revisions if needed. Rinse and repeat.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support