Native website chatbots are automated conversational agents integrated into a website, allowing users to interact without leaving the site. These bots assist in real-time, answer questions, guide users through processes, and enhance user experience.
WhatChimp introduced its Native Website Chatbot feature, allowing users to add a chat widget to their website landing pages and manage interactions via the WebChat Live Chat Option.
Prerequisites #
Before you begin, ensure you have the following:
- A WhatChimp account
- Admin access to your WordPress website
- The Elementor plugin installed (if using Elementor as a page builder)
Table of Contents #
1. Connect Your Website #
- Navigate to WebChat’s “Connect Website” option from the WhatChimp dashboard.
- Click Connect Website to access the configuration menu.
- Provide a suitable title for your chatbox.
- Enter your Website URL.
- Configure the Theme Background and Theme Color.
- Select colors for the Chat Bubble Background and Chat Bubble Color.
- Upload a Brand Logo and configure the Chatbox Wallpaper.
- Choose the chatbox position and whether it stays open or closed on startup.
- Set the X-Axis and Y-Axis positions for precise placement.
- Configure the Loading Chatbox After delay (default is 0 seconds).
- Choose whether to auto-delete subscriber records (default is Never).
- Click Connect to finalize the setup.
2. Copy the JS Embed Code #
- Click on Embed Code to open a dialog box.
- Copy the JavaScript embed code from the top-right corner.
- This code can be used for WordPress, custom-built sites, and other platforms.
3. Paste JS Embed Code on Your Website #
- Log into your WordPress website and access the dashboard.
- Navigate to the Homepage and select Visit Site.
- Click on the Home icon, then choose Edit with Elementor.
- Search for the Code widget in the Widgets section.
- Select the Shortcode widget, then drag and drop it inside a container on the page.
- Paste the copied embed code in the shortcode section.
- Publish the page to make the chatbot live.
Please note that we have selected the Home Page only and our chat widget will be visible only for this page. If you want it to be shown on the other pages; follow the same procedure.
**N.B: As Most of the WordPress Websites use Elementor plugin as page builder, we have used this. For other page builders the process will be almost similar.
4. Test Your Chatbot #
- Visit your website and open the chatbot.
- Test keyword triggers for bot responses.
- Return to the BotSailor Web Chat Live Chat Option to manage conversations.
By following these steps, you can successfully integrate WhatChimp’s WebChat into your WordPress site for seamless customer engagement.
5. FAQ #
1. Can I use this chatbot on non-WordPress websites? #
Yes, you can integrate the chatbot with custom-built websites and other platforms using the provided JavaScript embed code.
2. Do I need Elementor to add the chatbot to my site? #
No, Elementor is just one way to add the chatbot. You can paste the JS embed code into any page builder or directly into your site’s HTML.
3. Can I customize the chatbot’s appearance? #
Yes, you can modify the theme color, chat bubble background, chatbox wallpaper, and brand logo in the Webchat configuration menu.
5. What if the chatbot does not appear on my website? #
Check the following:
- Ensure the embed code is correctly pasted.
- Confirm that JavaScript is enabled on your site.
- Verify that the chatbot is activated in your BotSailor settings.
- Clear your website cache and try again.
