Adding a Chat Widget to Your Site [Classic]

Katherine Ramirez Updated by Katherine Ramirez

Welcome to our Placester Hacks series! Placester Hacks are Placester-approved tricks and workarounds that allow you to accomplish some customizations that may not seem possible with the current toolsets included in Placester’s products. Keep in mind that these hacks are generally more advanced than standard setup instructions. We recommend only using them if you’re familiar with HTML and website editing.

This article will walk you through how to add a chat widget to your site using the Javascript access which is part of your advanced subscription.  Please note that this feature is currently only available on certain subscription levels. If you notice that you don’t have access to this feature and would like to learn more please visit our packages and pricing page.

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 CSS/Javascript editor from your Dashboard, click on the three dots next to the update your site and then click “Edit Site” from the dropdown.

This will take you to your Site Settings.  Scroll down to the Site Design section and click on “Custom CSS & JS”

java1.png

To make sure the widget is placed correctly on the page click on the gear next to Custom Javascript.  Next, select “Footer”.

java6.png

Now, paste the code into the Javascript editor.  

java7.png

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

<script type=”text/javascript’>

and

</script>

java8.png

Once you have made the necessary adjustments to your code, click “save”.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?

Adding Facebook Messenger to your site [Classic]

Adding a Google Maps location to your Contact page [Classic]
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

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