Channels

Website Integration

Add the Verly chatbot widget to your website with one simple code snippet.

Want your chatbot live on your website without building anything custom? Copy one snippet from Verly, paste it into your website, and publish the change. If you have ever installed Google Analytics, Meta Pixel, or any other website script, this works the same way.

You do not need to be a developer for the basic setup. If you can paste code into your site footer, or ask your website builder to add a script before </body>, you can install the widget.

Copy This Snippet

<script
  src="https://widget.verlyai.xyz/embed.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-primary-color="#4F46E5"
></script>

This is the same embed format Verly uses on its own website. The only value that must be unique to you is data-chatbot-id.

Setting	What it does
`src`	Loads the Verly website widget.
`data-chatbot-id`	Connects the widget to your chatbot.
`data-position`	Chooses where the chat button appears. Common values: `bottom-right` or `bottom-left`.
`data-primary-color`	Matches the button to your brand. Use a HEX value like `#4F46E5` or an RGB value like `rgb(33, 32, 32)`.

Where Do I Get This Code?

Open your chatbot in Verly.
Go to Customization.
Open the Integration section.
Copy the embed code shown there.

If you copy the code from the Verly dashboard, your chatbot ID and brand color are already filled in for you.

Install It On Your Website

Step 1: Open your website editor

Use whatever tool manages your website today. That might be WordPress, Shopify, Webflow, Wix, Framer, or a custom-built website.

Step 2: Paste the script before the closing `</body>` tag

This is the safest place for most websites because it loads the chatbot after the page content.

<body>
  ...
  <script
    src="https://widget.verlyai.xyz/embed.js"
    data-chatbot-id="YOUR_CHATBOT_ID"
    data-position="bottom-right"
    data-primary-color="#4F46E5"
  ></script>
</body>

Step 3: Save and publish your website

If your platform has both Save and Publish, make sure you publish the change.

Step 4: Open your website and test it

Visit your website in a new tab or incognito window. You should see the chat button in the bottom corner.

Where Exactly Should I Paste It?

Use the option that matches your website:

WordPress: Add the snippet in your footer code area, theme footer, or a header/footer code injection plugin.
Shopify: Paste it in theme.liquid right before </body>.
Webflow: Add it in Site settings -> Custom code -> Footer code.
Wix / Framer / Squarespace: Use the custom code or footer code section.
Custom HTML website: Paste it into the main page template right before </body>.

If Your Website Uses Next.js or React

Your developer can add the same widget globally in the main layout file. This is how Verly loads the widget on its own Next.js website.

import Script from "next/script";

<Script
  src="https://widget.verlyai.xyz/embed.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-primary-color="rgb(33, 32, 32)"
  strategy="afterInteractive"
/>

<script
  src="https://widget.verlyai.xyz/embed.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-primary-color="#4F46E5"
></script>

Next.js (App Router): add it in app/layout.tsx inside <body>.
Next.js (Pages Router): add it in pages/_document.tsx inside <body>.
React / Vite: add it in index.html before </body>.

Quick Tips

Keep the snippet on every page where you want the chatbot available.
Do not paste the same widget code twice, or you may see two chat buttons.
If you change data-primary-color or data-position, save and republish your website.
If you create a new chatbot in Verly, update the data-chatbot-id to the new one.

Troubleshooting

The widget is not showing up

Check these first:

You pasted the code on the live website, not only inside a preview or draft editor.
The data-chatbot-id is correct.
You saved and published the website after adding the snippet.
An ad blocker or script-blocking browser extension is not hiding the widget during testing.

Customize your chatbot to match your brand.
Deploy your latest changes before sending real users to the bot.
Set up Identity Verification if your users log in to your app and you want personalized conversations.

WhatsApp Integration

Connect WhatsApp Business

VerlyAI Blog

AI agent guides & playbooks

Solutions by industry

E-commerce, SaaS, Healthcare & more

Automate customer support and sales on WhatsApp.

Welcome to Voice Agents

Deploy low-latency AI voice agents that handle phone calls 24/7.