Skip to content
English
  • There are no suggestions because the search field is empty.

How to Install the Chat Widget on Your Website

This article will guide you through locating your business’s unique ChatBot code and installing the Chat widget on your website.

Installing your Yonder chatbot is quick and straightforward. Many customers complete the installation themselves, while others pass the code on to their website developers. 

Once the code is installed, your chatbot will go live!

Step-by-Step Installation Instructions

1. In your Yonder account, go to Chatbot and then select Website Widget from the left-hand menu.
image-png-Feb-18-2025-12-23-04-5053-AM

2. At the top of the page, you’ll see three tabs: Welcome Page, Design, and Install.

image-png-Feb-18-2025-12-23-47-5831-AM

3. Select the Install tab.

4. Click the COPY button to copy your chatbot code to your clipboard.

image-png-Feb-18-2025-12-24-25-2676-AM

5. Paste the code snippet in the <head> tag of your website, just below your Google Analytics tag.

Note: Some Content Management Systems (CMS) like Wordpress have a settings area called "Header and Footer" and you can paste the code here. You can also install the code through Google Tag Manager using "custom code" in the header.</head>

6. Publish the changes to your website.

That’s it! Your chatbot is ready to help you and your customers!

Sending the Code to Your Website Developer

If you’re forwarding the ChatBot code to your website developer, make sure it is copied accurately. Avoid copying and pasting the code directly into an email, as this may cause formatting issues. 

Instead:

  • Paste the code into a document (e.g., Google Docs or Microsoft Word).
  • Share the document as an attachment in your email.

Sending your chatbot as link

You can also share your chatbot as a direct link — useful for anywhere your customers might want to start a conversation outside your website. To get the link, go to your Chatbot Content and click the Test Chatbot button. A Copy link option appears at the top of the page.

A few examples of where to use it:

  • An email marketing campaign
  • A Google Business profile or Facebook page
  • A booking confirmation email, so guests can ask follow-up questions
  • A QR code on printed materials or signage at your venue
  • An SMS message sent to a customer

Frequently Asked Questions

Where is the best place in my website code to install the chatbot code?
The code should be installed as high up in the <head> tag as possible, ideally just below the Google Analytics tag.

Why does the chatbot code need to go in the <head> tag?
Placing the code high in the <head> tag ensures the ChatBot loads quickly and reduces the risk of interference from other scripts on your website.

What if I’m using a single-page application (SPA) platform like Wix?
For SPA platforms like Wix, ensure the "Load every page load" option is enabled to make the ChatBot function properly across your site

Can I move my chatbot's position on the website?
Yes! Refer to our article, Adjusting the Chat Widget Position on Your Webpage, for step-by-step instructions.

What pages will my chatbot appear on? 
The chatbot will be live across your entire website by default. If you'd prefer to display the chatbot on specific pages only, please contact our support team for assistance.

Why isn’t my chatbot showing after installing the code? 
If your chatbot doesn’t appear immediately, try performing a hard refresh on your browser or opening your website in an incognito window. If the issue persists, reach out to our support team for help.

Can I share my chatbot without installing it on my website?
Yes. Your chatbot is also available as a direct link you can share anywhere — email campaigns, booking confirmations, Google Business profiles, printed QR codes, and more. 

By following these steps, your Yonder ChatBot will be seamlessly integrated into your website, enhancing customer engagement and support.

Have questions? Contact support@yonderhq.com