How to embed Brevn chat widget on your website (step by step)

What is the Brevn chat widget?

The Brevn chat widget is an AI-powered website assistant that answers visitor questions using your business content, captures leads, and stays available when your team is offline. It appears as a small chat button on your website and opens without sending visitors to another page.

Brevn loads through one lightweight, asynchronous script. You do not need to rebuild your website, and the widget does not block the rest of the page while it loads. The same embed code works on custom HTML sites and popular website builders.

Before you install the website chat widget

• Finish Crawl & index so the AI chatbot can answer from your current website content.
• Customize the colors, greeting, icon, and position in Appearance.
• Activate the agent in Settings when you are ready for visitors to use it.
• Make sure you can edit your website’s global footer, custom code, or main layout.

How to embed the Brevn chat widget

1. 1

   Open your Brevn Install page

   Sign in to Brevn, select your AI agent, and open the Install tab from the dashboard sidebar.

2. 2

   Copy your unique embed code

   Select Copy code. Your snippet contains the public ID that connects the website chat widget to the correct Brevn agent.

3. 3

   Paste the code into your website

   Add the snippet to your site-wide footer or immediately before the closing </body> tag. A global location makes the Brevn widget available on every published page.

4. 4

   Publish your website changes

   Save and publish the live site. If your platform or CDN uses caching, clear the cache so the updated HTML is served to visitors.

5. 5

   Verify the installation

   Return to the Brevn Install page and select Verify installation. Brevn checks your homepage for the embed script and confirms that the widget can load.

What the Brevn embed code looks like

Always copy the exact snippet from your dashboard. A typical Brevn website chat widget script looks like this:

<script src="https://brevn.com/embed/YOUR_AGENT_ID.js" async></script>

Where to add Brevn on each website platform

Custom HTML or Next.js website

For a traditional HTML website, paste the Brevn script directly before </body> in your shared layout or every page that needs chat. For a framework such as Next.js, React, or Vue, add it through the framework’s recommended script component or root layout so it loads once across the site.

WordPress

In WordPress, use a trusted header-and-footer code plugin and place the snippet in the site-wide footer or body section. You can also add it before </body> in your child theme’s footer template. Avoid editing a parent theme directly because a theme update may remove the code.

Shopify

Go to Online Store → Themes, open the menu for your active theme, and choose Edit code. Under Layout, open theme.liquid, paste the widget script immediately before </body>, and save.

Wix

Open Settings → Custom Code in Wix and add the Brevn snippet. Choose Body — End as the location, apply it to All Pages, and publish the website.

Webflow

Open Project Settings → Custom Code in Webflow. Paste the script into Footer Code, save the changes, and publish to your live domain. Use page-level custom code only when you want the widget on selected pages.

Squarespace

Go to Settings → Advanced → Code Injection and paste the script into the Footer field. Save the change and refresh your live site. Code Injection availability depends on your Squarespace plan.

How to check that the chat widget is working

• Open your published website in a private or incognito browser window.
• Confirm that the Brevn launcher appears in the selected corner of the page.
• Open the widget and send a test question based on content from your website.
• Check that the conversation appears in your Brevn dashboard.
• Test on both desktop and mobile before announcing the widget.

Brevn chat widget not showing? Try these fixes

• Publish the change: Saving a draft in your website builder does not update the live site.
• Use the complete script: Copy the snippet again from Brevn and make sure no characters are missing.
• Place it site-wide: Add the code to the global footer or layout instead of one unpublished page.
• Clear website caches: Purge your CMS cache, CDN cache, and browser cache after updating the code.
• Disable blockers for testing: Privacy extensions and ad blockers can prevent third-party widgets from loading.
• Check agent status: Activate your Brevn agent in Settings before testing visitor conversations.

Frequently asked questions

Do I need coding experience to install Brevn?

No. Most website builders provide a Custom Code, Footer Code, or Code Injection area. You only need to copy the Brevn script, paste it there, and publish.

Will the Brevn chat widget slow down my website?

The embed script uses the async attribute, so the browser can continue loading your page while it downloads the widget. As with any third-party script, you should still monitor your site’s real-world performance after installation.

Can I show the widget on only some pages?

Yes. Add the script only to the page templates where you want Brevn to appear. For site-wide support, place it in the global footer or root layout instead.

Can I change the widget after embedding it?

Yes. Update the greeting, colors, icon, position, and other appearance settings in Brevn. You normally do not need to replace the embed code after changing the design.

Ready to add an AI chatbot to your website? Create your Brevn agent, train it on your business content, and install the chat widget in minutes.