A chatbot widget on your site allows you to engage with visitors in real time, providing instant support and enhancing the customer experience. With WebChat Wizard, adding one is effortless. This tutorial walks you through three different ways to integrate it into WordPress, tailored to your level of customization and technical expertise—so you can choose the method that best fits your needs.

💡 PRO TIP: While this guide focuses on WordPress, you can actually embed the chat widget on any website that supports custom code. Simply follow the instructions below to create your widget and paste the embed code into your site—most platforms will follow a similar process.

Creating the widget

First, you need to create the chatbot widget; this process is the same regardless of the connection method you select later. To do this, follow the steps below.

Access the WebChat settings. Log in to your dashboard. Navigate to the WebChat section. Click on Chat Widget and select Create Live Chat Widget.

Configure your chatbot widget. You should adjust the following fields:

• • Set a display title to define how your chatbot appears.
  • Enter the website URL where the chatbot will be active.
  • Customize the theme background color and text colors to match your branding.
  • Upload a brand logo (check the preferred format and size by hovering over the “i” button).
  • Upload a chatbox wallpaper to create a visually appealing experience (verify the format and size recommendations).
  • Choose your preferred font for a cohesive look.
  • Position the chatbox (e.g., bottom left, bottom right, top left, or top right).
  • Set whether the chatbox is open or closed by default when users land on the page.
  • Adjust X and Y-axis positions to fine-tune placement.
  • Set a delay for chatbox loading to avoid interference with other site elements.
  • Configure an auto-delay response to engage subscribers at different time intervals.

Click Connect to activate the chatbox.

Copy the embed code. Click on Code to embed, and copy the Javascript code that will show.

Inserting the widget in your site

Now, all that’s left is to paste the embed code into your site to activate the chat widget. Below, we outline three methods for WordPress integration. However, if you’re using a different page builder, the process is similar—simply paste the embed code into any platform that supports custom code embedding.

Method 1: Updating theme files

You can use this method to insert the embed code of your chatbot directly in your WordPress theme.

Open your theme settings. Log into your WordPress site. Go to Appearance > Theme File Editor.
Paste the code on the footer file. In the right panel, scroll down and select the Footer.php file. Scroll to the bottom of the file and paste the embed code outside any specific parameter.
Save. Click Update File to save changes.

💡 PRO TIP: Different themes may have different file structures, so the placement may vary. We recommend you check your theme’s documentation for details.

Check if It’s Working. Refresh your site and test the chatbot. The widget should now be active and visible on your website!

Method 2: Using a plugin

If you’d rather not mess with your theme files, you can install a plugin for placing code on your site.

 Install the WP Code plugin. Log into your WordPress site. Go to Plugins > Add new plugin. Search for WP Code. Click Install Now, then Activate.

Paste the embed code. Go to Code Snippets > Header and Footer.

Paste the WebChat code into one of the three available sections: Header, Body, or Footer. Click Save Changes to confirm.

Refresh your site. Open your website in a new tab and check if the chatbox appears. If the chatbox doesn’t load, clear your browser cache and try again.

Method 3: Using Elementor for specific pages

If your site is built with Elementor, you can use this method to place the widget on specific pages, skipping others where it might not be necesssary.

Open Elementor on the page where you wish to insert the WebChat widget. Log into Your WordPress Site. Click the Home icon in the WordPress dashboard. Select Visit Site. Choose the specific page where you want to install the chatbot. Click Edit with Elementor to enter the page editor.

Insert the embed code. In the Elementor editor, search for Code in the Widget box. Scroll down and drag Shortcode Widget to the desired section of your page. Paste the embed code into the widget and click Apply. Click Publish to save changes.

Refresh the page and test.  Open the page in a new tab and check if the WebChat widget appears. Click on the WebChat widget and send a test message.

Return to the Live Chat section in WebChat settings to verify message reception.

Troubleshooting Tips

• If the chatbox doesn’t appear immediately, try clearing your WordPress cache.
• Check if any security plugins are blocking the chat script.
• Ensure your WordPress theme allows script additions in the header/footer.
• If using a plugin, confirm it is activated and updated.

Editing the chatbot sequences

Now that your widget is live on your website, you can customize chatbot sequences and conversations to enhance user engagement.

Open the Bot Manager. Log in to your dashboard. Navigate to the WebChat section. Click on Bot Manager and select your page. You will find all the chatbot tools in there, from the Bot replies, to the AI Assistant.

For more in-depth guidance, check our documentation—chatbot setup follows the same steps as other social media integrations. Experiment with different chatbot elements to create engaging interactions and improve the user experience.

Need expert assistance? You can always hire a professional to help you fine-tune your chatbot sequences! Click here to get started.