How to add the ElevenLabs Conversational AI widget to your WordPress website

ElevenLabs’ Conversational AI is a powerful customer support tool for creating interactive, AI-driven experiences that boost engagement. If you have a WordPress website then you can easily integrate custom HTML and JavaScript, including dynamic features like ElevenLabs’ Conversational AI.

In this guide, we’ll show you how to add the Conversational AI widget to your WordPress site using Custom HTML Blocks for specific pages and Code Injection for global functionality.

Before you get started

Before starting, make sure you have the following:

1. WordPress plan: For WordPress.com users, a Business or Commerce plan is required to add custom JavaScript. Self-hosted WordPress users can add code without these restrictions.
2. ElevenLabs account: Configure your Conversational AI agent in ElevenLabs and copy the embed code, which includes < script > and < div > snippets.
3. Basic WordPress knowledge: Familiarity with adding blocks, editing pages, or using plugins is helpful.

Step-by-step guide

Step 1: Prepare your ElevenLabs widget

1. Log in to your ElevenLabs account.
2. Go to the Conversational AI section.
3. Configure your AI agent and copy the embed code, which includes:
4. • A < script > snippet to load the widget’s functionality.
   • A < div > snippet to define where the widget will appear.

Step 2: Add the widget to a specific page using Custom HTML blocks

To display the widget on a specific page, use WordPress’s Custom HTML Block.

1. Log in to your WordPress dashboard.
2. Navigate to Pages and either create a new page or edit an existing one.
3. Click the + icon to add a new block.
4. Search for and select Custom HTML from the block options.
5. Paste the < div > snippet from your ElevenLabs embed code into the block.
6. Click Preview to confirm the widget is rendering correctly.
7. Publish or update the page to make the changes live.

Step 3: Add the script globally using a plugin or theme settings

To ensure the widget functions properly, you need to include the < script > snippet globally.

Option A: Using a plugin (recommended for non-developers)

1. Install and activate a plugin like Header Footer Code Manager.
2. Navigate to the plugin settings and create a new code snippet.
3. Paste the < script > snippet into the Footer section.
4. Set the snippet to run on All Pages.
5. Save your changes.

Option B: Adding the script directly to your theme

1. Go to Appearance > Theme Editor in your WordPress dashboard.
2. Open the footer.php file of your active theme.
3. Paste the < script > snippet just before the closing < /body > tag.
4. Save the file.

Step 4: Publish and test

1. Visit the page where you added the widget to confirm it appears and functions correctly.
2. Test the widget on multiple devices and browsers to ensure it works seamlessly.

Common issues and troubleshooting

Struggling to get the widget up and running? These tips might help. 

Issue 1: Widget not displaying

• Cause: Missing or misplaced < script > or < div > snippets.
• Solution: Double-check that the < script > is added globally and the < div > is placed on the page.

Issue 2: Widget misaligned

• Cause: Block alignment or missing styling.
• Solution: Use WordPress’s block alignment tools or add custom CSS to position the widget properly.

Issue 3: Plugin conflicts

• Cause: Other plugins interfering with JavaScript execution.
• Solution: Deactivate plugins one by one to identify the conflict.

Advanced tips

Check out these tips for more help getting the widget to operate as you want. 

• Customizing the widget: Use WordPress’s Customize > Additional CSS section to style the widget, ensuring it matches your site’s design.
• Testing across devices: Test the widget on desktop, tablet, and mobile devices to ensure a consistent user experience.
• Page-specific widgets: If you want the widget to appear only on specific pages, avoid adding the < script > snippet globally. Instead, include it within a plugin or block that targets those pages.

Final thoughts

Adding the ElevenLabs Conversational AI widget to your WordPress website is an effective way to engage visitors with AI-driven interactions. Whether you’re embedding it on a single page or across your entire site, WordPress provides the tools you need for seamless integration.

Follow the steps outlined here, test your implementation thoroughly, and make adjustments as needed. If you encounter issues, don’t hesitate to reach out to ElevenLabs support for assistance.

Or, if you haven’t already, sign up for ElevenLabs today to kickstart the process.