Chatbot
      Back to home
      1. Yonder Knowledge Base
      2. Chatbot

      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.

      Frequently Asked Questions

      1. 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.

      2. 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.

      3. 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.
      4. Can I move my ChatBot’s position on the website?
        Yes! Refer to our article, Adjusting the Chat Widget Position on Your Webpage (coming soon!), for step-by-step instructions.
      5. 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.
      6. 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.

      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