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

Katherine Ramirez Updated by Katherine Ramirez

This article will show you how to integrate a chat widget using a javascript editor( Codeless ).

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.

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.

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

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 “Design 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 “Save.”

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

Need More Help?

For questions, concerns or feedback, please chat with our team:https://app.placester.com/chat

How did we do?

Customizer: Using Custom Lead Capture[Codeless]

Customizer: Editing an Existing Page [Codeless]
#

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