Back to Dashboard

Add ValAi to Your Website

Put a friendly AI concierge on your website so guests can get instant answers — day or night. No coding skills needed. Copy a small piece of code, paste it into your site, and you're done.

Which option should I choose?

Floating bubble — recommended for most people

A small chat button sits in the corner of every page on your website. When a guest clicks it, the chat opens. It's always there, doesn't take up space on your pages, and works on phones and laptops. Pick this if you just want guests to be able to ask questions anywhere on your site.

Inline iframe — for a specific page

The chat appears inside one page of your website — like a "Contact" or "Guest info" page. It looks like a regular section of your page. Pick this if you want the chat to feel like part of one specific page instead of floating on every page.

Step 1 — Copy your code

Click Copy on the option you picked above. Then jump to your platform below for where to paste it.

Floating Bubble code

Paste this once in your site's footer — the chat button appears on every page.

<script
  src="https://usevalai.ai/embed/valai.js"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-primary="#0F172A"
  data-position="bottom-right"
  defer>
</script>
Inline Iframe code

Paste this inside a single page where you want the chat window to show up.

<iframe
  src="https://usevalai.ai/embed/YOUR_ASSISTANT_ID?theme=light&primary=%230F172A"
  title="AI Concierge"
  style="width:100%;height:600px;border:0;border-radius:16px;"
  loading="lazy"
  allow="clipboard-write">
</iframe>

Replace YOUR_ASSISTANT_ID with your property ID from the Dashboard (the "Add to Website" button shows it pre-filled).

Step 2 — Paste it into your website

Pick the platform your website is built on. Each tab shows exactly where to click and paste — no technical knowledge required.

Plain HTML or a custom-built site

Your code (click Copy)

<script
  src="https://usevalai.ai/embed/valai.js"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-primary="#0F172A"
  data-position="bottom-right"
  defer>
</script>
  1. 1Open your website's HTML file in any editor (like Notepad, TextEdit, or VS Code).
  2. 2Scroll to the bottom of the file and find the line that says </body>.
  3. 3Paste the Floating Bubble code on the line just before </body>. Do this on every page where you want the chat to appear.
  4. 4Save the file and upload it to your hosting (or push your changes). Refresh your site — you should see the chat bubble in the corner.

Tip

If your site builder lets you add 'custom code' or a 'footer script', use that instead — you won't have to edit each page manually.

Customization Options

data-primary

Hex color for the bubble button and user message bubbles. Example: #3B82F6

data-position

Corner placement. Options: bottom-right (default) or bottom-left.

data-welcome

Override the default greeting message shown when the chat opens.

data-theme

Light or dark mode for the chat panel. Options: light or dark.

Troubleshooting

The bubble is not showing▼

Check that your data-assistant-id is correct and that the script is not being blocked by a Content Security Policy (CSP). Also verify you pasted it before the closing </body> tag.

The chat panel looks cut off on mobile▼

The embed script automatically switches to full-screen on screens narrower than 640 px. If your site uses a custom viewport meta tag, make sure it includes width=device-width, initial-scale=1.

I want the bubble only on one page▼

Paste the snippet only into the HTML of the page where you want it. In WordPress, use a page-specific template or a plugin that lets you inject code per page. In Webflow, add the embed element directly to that page instead of using project-wide footer code.