Dashboard

Documentation

WordPress Integration Guide

Learn how to integrate Demeterics into your workflows with step-by-step guides and API examples.

WordPress Integration Guide

Add the Demeterics AI Chat widget to your WordPress site using plugins or theme files.

Requirements

  • A WordPress website (self-hosted or WordPress.com Business plan)
  • A Demeterics AI Chat widget (get your widget key from the AI Chat dashboard)
  • Administrator access to your WordPress site

The easiest and safest way to add the widget without editing theme files.

Step 1: Install a Header/Footer Plugin

We recommend Insert Headers and Footers (500,000+ active installations):

  1. Log into your WordPress dashboard
  2. Go to Plugins → Add New
  3. Search for "Insert Headers and Footers"
  4. Click Install Now on the "Insert Headers and Footers" plugin (by WPBeginner)
  5. Click Activate

Alternative plugins (any of these will work):

  • Header Footer Code Manager
  • Header and Footer Scripts
  • WP Code

Step 2: Get Your Widget Code

  1. Log into your Demeterics dashboard
  2. Go to AI Chat
  3. Click on your widget
  4. Copy your Agent Key (e.g., DEM-A4E4OWSVGHBN)

Step 3: Add the Widget Code

  1. In WordPress, go to Settings → Insert Headers and Footers
  2. Scroll down to the Scripts in Footer section
  3. Paste this code:
<!-- Demeterics AI Chat Widget -->
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual Agent Key
  2. Click Save

Step 4: Test Your Widget

  1. Visit your website (not logged into WordPress)
  2. The widget should appear in the bottom right corner
  3. Click it to test a conversation

Method 2: Edit Theme Files (Advanced)

Warning: Only use this method if you're comfortable editing theme files. Use a child theme to prevent changes from being overwritten during theme updates.

Steps:

  1. Go to Appearance → Theme File Editor
  2. WordPress will show a warning - click I understand
  3. Find footer.php in the right sidebar
  4. Scroll to the bottom and find the </body> tag
  5. Add this code just before </body>:
<!-- Demeterics AI Chat Widget -->
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual key
  2. Click Update File

Important: These changes will be lost if you update your theme. Use a child theme or Method 1 (plugin) instead.

Method 3: Page Builders (Elementor, Divi, etc.)

If you use a page builder, you can add the widget using an HTML/Code widget.

Elementor:

  1. Edit a page with Elementor
  2. Drag an HTML widget to your page
  3. Paste your widget embed code
  4. Click Update
  5. Repeat for each page (or add it to the theme footer template)

Divi:

  1. Edit a page with Divi
  2. Add a Code module
  3. Paste your widget embed code
  4. Save and publish

Note: For site-wide installation, add the code to your theme's footer template in your page builder.

Customization Options

Change the Widget Title

<dem-agent name="default" title="Chat with us!"></dem-agent>

Use Different Prompts on Different Pages

WordPress makes it easy to show different chatbot personalities based on page type.

Option 1: Manual (Simple)
Edit the page and change the name attribute in the embed code.

Option 2: Conditional Tags (Advanced)
Add this to your footer code instead:

<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>

<?php if (is_front_page()) : ?>
  <dem-agent name="home" title="Welcome!"></dem-agent>
<?php elseif (is_shop() || is_product()) : ?>
  <dem-agent name="sales" title="Product Questions?"></dem-agent>
<?php elseif (is_page('support') || is_page('faq')) : ?>
  <dem-agent name="support" title="How can we help?"></dem-agent>
<?php else : ?>
  <dem-agent name="default" title="Need help?"></dem-agent>
<?php endif; ?>

Make sure you've created these prompts (home, sales, support) in your Demeterics dashboard first!

Start the Widget Open

<dem-agent name="default" title="Need help?" state="open"></dem-agent>

Embedded Widget (Inline on Page)

To place the widget inline (not floating):

<dem-agent mode="embedded" name="support" title="Support Assistant"></dem-agent>

You can add this to any page using a Text/HTML widget or the page editor.

Troubleshooting

Widget doesn't appear

Check these:

  1. Clear your WordPress cache (if using a caching plugin like WP Super Cache or W3 Total Cache)
  2. Clear your browser cache and hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
  3. Is your widget key correct?
  4. Is your WordPress site domain added to Allowed Domains in your Demeterics widget settings?
  5. Check browser console for JavaScript errors (F12 → Console tab)

Common issue: Some caching plugins cache JavaScript. Clear all caches after adding the widget.

"Domain not allowed for this agent"

  1. Go to your Demeterics dashboard → AI Chat → Your Widget
  2. Add your WordPress domain to Allowed Domains (e.g., yoursite.com)
  3. If you use both www.yoursite.com and yoursite.com, add both
  4. Save and refresh your website

Widget conflicts with theme or plugins

If the widget doesn't work properly:

  1. Temporarily disable other chat/popup plugins
  2. Test with a default WordPress theme (Twenty Twenty-Four)
  3. If it works, there's a conflict with your theme or another plugin

Email us at support@demeterics.com with details and we'll help troubleshoot.

Widget appears multiple times

If you added the code in multiple places:

  1. Check your header/footer plugin settings
  2. Check your theme's footer.php file
  3. Remove duplicate code from one location

WooCommerce Integration

Want to show product-specific help on WooCommerce pages?

Add this to your footer (requires Method 1 or 2):

<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>

<?php if (is_product()) : ?>
  <dem-agent name="product" title="Product Help"></dem-agent>
<?php elseif (is_cart() || is_checkout()) : ?>
  <dem-agent name="checkout" title="Checkout Help"></dem-agent>
<?php else : ?>
  <dem-agent name="default" title="Need help?"></dem-agent>
<?php endif; ?>

Create product and checkout prompts in your Demeterics dashboard with specific product and checkout information.

Need Help?

Email us: support@demeterics.com

We can help with:

  • Plugin recommendations for your setup
  • Writing custom prompts for your WordPress site
  • Advanced conditional logic for different pages
  • WooCommerce-specific chatbot configurations
  • Troubleshooting conflicts

Additional Resources