Skip to main content

​
How It Works

Installing the Beni chat widget is like adding a Google Analytics snippet to your site. You copy a small piece of code from your dashboard and paste it into your website. That is it. The widget loads on its own, does not slow down your site, and starts working immediately. No developer needed. If you have ever pasted a tracking code or embedded a YouTube video on your site, you can do this.

​
Find Your Embed Code

Log in to your Beni workspace and go to Agents → Select Agent → Chat Widget. You will see a code snippet that looks like this: 
<script
  src="https://widget.trybeni.ai/widget/latest/beni.iife.js"
  data-agent-id="YOUR_AGENT_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  defer
></script>
Copy this snippet.
  • data-agent-id value is already filled
  • For data-publishable-key, You need to get publishable key from Settings → Developers → Publishable Keys page.
Your publishable key is safe to include on your website. It is not a secret key. It only allows the widget to connect to your specific agent and cannot be used to access your workspace or modify your account. Publishable keys also control which domains are allowed to load your widget — make sure your site’s domain is added under Settings → Developers → Publishable Keys.

​
Platform Instructions

Pick your website platform below and follow the steps. If your platform is not listed, scroll down to the Custom / Other Platforms section.
There are a few ways to do this. Pick whichever feels most comfortable.Option A: Using a plugin (easiest)
  1. In your WordPress dashboard, go to Plugins → Add New
  2. Search for and install WPCode (or any “header and footer code” plugin)
  3. Go to Code Snippets → Header & Footer
  4. Paste your Beni embed code in the Footer section
  5. Save
The widget will now appear on every page of your site.Option B: Using the theme editor
  1. Go to Appearance → Theme File Editor
  2. Open footer.php from the right sidebar
  3. Paste your embed code just before the </body> tag
  4. Click Update File
Option C: Single page onlyIf you only want the widget on a specific page:
  1. Edit the page in the block editor
  2. Add a Custom HTML block
  3. Paste your embed code
  4. Publish
If you are using a block theme like Twenty Twenty-Four, you may not have a footer.php file. Use the plugin method instead.

​
Google Tag Manager

If you manage all your website scripts through Google Tag Manager, you can add Beni there instead.
  1. In GTM, click Tags → New
  2. Choose Custom HTML as the tag type
  3. Paste your Beni embed code
  4. Set the trigger to All Pages
  5. Save and Publish the container

​
For Developers: Single-Page Applications

If your site is built with a JavaScript framework, add the script to your app shell or layout component. 
// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://widget.trybeni.ai/widget/latest/beni.iife.js"
          data-agent-id="YOUR_AGENT_ID"
          data-publishable-key="YOUR_PUBLISHABLE_KEY"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

​
Verify It Is Working

After adding the code:
1

Open your website

Visit your site in a new browser tab. Use an incognito window if you want to avoid caching issues.
2

Look for the chat icon

You should see the Beni chat icon in the bottom-right corner of your page.
3

Send a test message

Click the icon and send a message. If your agent has a knowledge base set up, it should respond based on your business content.

​
Troubleshooting

Clear your browser cache or open the site in an incognito window. Confirm the snippet is placed before the closing </body> tag, not inside <head>. Double-check that your data-agent-id and data-publishable-key values have no extra spaces or missing characters. On Wix and Squarespace, verify you are on a plan that supports custom code injection.
Make sure your agent has a published knowledge base in the Beni dashboard. Open your browser console (press F12, then click the Console tab) and check for any error messages. If you see a 401 or 403 error, your publishable key may be incorrect.
If you have another chat widget installed (Intercom, Drift, Tidio, etc.), it may overlap with Beni. Remove the other widget’s embed code, or adjust the Beni widget position in Agents → Select Agent → Chat Widget.
Publishable keys control which domains are permitted to load your widget. If the widget loads on localhost but not on your live site, go to Settings → Developers → Publishable Keys, select your key, and add your site’s domain to the allowed list. Open the browser console and look for a 403 error if you are unsure whether this is the cause.
Some WordPress themes and Shopify themes have aggressive global CSS that can interfere with third-party widgets. If the widget looks off, reach out to us and we will help you sort it out.

​
Customization

You do not need to touch any code to customize the widget. Everything is managed from your Beni dashboard under Agents → Select Agent → Chat Widget:
  • Widget color to match your brand
  • Chat Widget First Message that greets visitors when they open the chat
  • Bubble Text — a short label that appears attached to the widget bubble to invite visitors to click
Changes apply automatically. No need to update your embed code.
Set a first message that tells visitors what the agent can help with. Something like “Hi! I can answer questions about our services, help you book an appointment, or connect you with our team.” gives people a clear reason to start chatting.

​
Need Help?

If you get stuck or would prefer a hands-off setup, email us at support@trybeni.ai and we will install the widget on your site for you. No charge, no hassle.