WordPress Integration

What You'll Need

Before starting the installation, make sure you have:

• Active WordPress website with a Business or Commerce plan (required for JavaScript)
• OpenSpeechAI account with a configured agent
• Admin access to your WordPress dashboard

Important: WordPress.com Free, Personal, and Premium plans do not support JavaScript code. You'll need to upgrade to a Business or Commerce plan to add the chat widget. Self-hosted WordPress sites (wordpress.org) have no restrictions.

Get Your Widget Script

Before you can install the widget on WordPress, you need to get your unique widget script from the OpenSpeechAI dashboard. This script connects the chat interface on your site to your configured AI agent.

Make sure you've already created an agent and connected a knowledge base (if needed). The widget won't work without an active agent.

To get your widget script:

1. Log in to your OpenSpeechAI dashboard
2. Navigate to Agents and select your agent
3. Click the Widget tab at the top
4. You'll see your unique installation code
5. Click Copy to copy it to your clipboard

The code looks like this:

<script
  src="https://widget.openspeechai.com/widgets/chat-widget.js?widgetId=abc-123"
  defer
  crossorigin="anonymous"
></script>

Keep this code ready - you'll paste it into your WordPress site in the next step.

Add the Widget Script

You can add the widget script to your WordPress site using the Custom HTML block.

1. Log in to your WordPress admin dashboard
2. Go to the page where you want to add the widget (or edit your homepage)
3. Click the + button to add a new block
4. Search for Custom HTML and select it
5. Paste your widget script into the Custom HTML block
6. Click Update or Publish to save your changes

To add the widget to all pages, you can add the Custom HTML block to your site's footer template or use a plugin like Code Snippets to insert the script site-wide.

Test Your Installation

Now that you've added the widget script, it's time to verify everything is working correctly.

1. Open your WordPress site in a new browser tab (visit your live site, not the admin)
2. You should see the chat widget appear in the bottom-right corner of your page
3. Click on the widget to open the chat interface
4. Send a test message to verify your agent responds correctly
5. Navigate to different pages to confirm the widget appears consistently

If the widget doesn't appear immediately, try clearing your browser cache and refreshing the page:

• Windows/Linux: Press Ctrl + Shift + R
• Mac: Press Cmd + Shift + R

Also clear any WordPress caching plugins you may have installed (WP Super Cache, W3 Total Cache, etc.).

The widget is now live on your site and ready to help your visitors 24/7.

Troubleshooting

If you encounter any issues with your widget installation, here are common problems and solutions:

Widget not appearing?

• Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R) and refresh
• Clear your WordPress cache if using a caching plugin
• Check that you copied the complete script from your dashboard

Widget appears but doesn't respond?

• Check that your agent is published and active

Custom HTML block not accepting JavaScript?

• This requires a WordPress.com Business or Commerce plan
• Free, Personal, and Premium plans cannot add JavaScript
• Upgrade to a Business plan to unlock this feature
• Self-hosted WordPress (wordpress.org) has no restrictions

Need help?

If you're still experiencing issues, email us at shri@openspeechai.com with:

• Your WordPress site URL
• Screenshot of the issue

We're here to help you get up and running!