Deployment

Make your chatbot available to users.

Deploying Your Chatbot

1. Go to "Settings" > "Deployment"
2. Click "Deploy"
3. Wait for the deployment to complete
4. Copy your chatbot URL

Deployment URL

After deployment, your chatbot is accessible at:

https://your-chatbot-name.wizchat.app

Or with a custom subdomain:

https://support.wizchat.app

Embedding on Your Website

Script Embed

Add this script to your website's HTML:

<script>
  window.chatbotConfig = { chatbotId: "YOUR_CHATBOT_ID" };
</script>
<script src="https://your-chatbot.wizchat.app/embed.js" async></script>

Paste it just before the closing </body> tag of every page that should show the widget. The window.chatbotConfig block must come before the embed.js tag — the script reads that object once, as it loads.

Everything in chatbotConfig is read at runtime, so changing your chatbot's settings in the dashboard takes effect on the live widget without re-pasting the snippet.

Platform guides

React / Next.js

Mount this once near the root of your app (in Next.js App Router, a client component rendered from app/layout.tsx):

'use client';

import { useEffect } from 'react';

export default function WizChatWidget() {
  useEffect(() => {
    // Must be set before embed.js loads — it reads this object once.
    window.chatbotConfig = { chatbotId: 'YOUR_CHATBOT_ID' };

    // The id guard keeps React 18 Strict Mode's double-invoked effect (and any
    // remount) from injecting the script twice.
    if (document.getElementById('wizchat-embed')) return;

    const script = document.createElement('script');
    script.id = 'wizchat-embed';
    script.src = 'https://your-chatbot.wizchat.app/embed.js';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return null;
}

Don't remove the script on unmount

embed.js has no teardown hook, so removing its <script> tag drops the loader but leaves the widget's own elements on the page. Load it once from a component that lives for the session — the root layout — and leave it there.

WordPress

The simplest route is a header/footer plugin (WPCode, Insert Headers and Footers, or similar): paste the snippet into the plugin's footer / body box and save.

To do it in code, add it to a child theme's functions.php or a site-specific plugin, hooked to wp_footer:

add_action( 'wp_footer', function () { ?>
  <script>
    window.chatbotConfig = { chatbotId: 'YOUR_CHATBOT_ID' };
  </script>
  <script src="https://your-chatbot.wizchat.app/embed.js" async></script>
<?php } );

caution

Don't edit the parent theme's footer.php directly — a theme update overwrites it and the widget silently disappears.

Shopify

1. In the Shopify admin, go to Online Store → Themes
2. On your theme, open the ⋯ menu → Edit code
3. Open the Layout folder → theme.liquid
4. Paste the snippet just before the closing </body> tag
5. Save

caution

Theme code edits don't travel with you: if you switch themes or install a fresh copy of one, re-add the snippet to the new theme.

Configuration options

Every field is optional except chatbotId.

Option	Default	Description
chatbotId	required	Your chatbot's ID. The widget logs an error and does nothing without it.
position	"bottom-right"	Corner for the launcher and popup: "bottom-right", "bottom-left", "top-right", "top-left". Ignored in sidebar mode, which is always right-anchored.
theme	"auto"	"auto", "light" or "dark". "auto" follows the visitor's system setting.
primaryColor	"#3b82f6"	Accent color: panel title, visitor message bubbles, links and the send button — plus the launcher bubble when no launcher icon is set.
width	400	Panel width in px (rail width in sidebar mode). Clamped to the viewport.
height	see description	Panel height in px. Omit for the responsive default. Ignored in sidebar mode — the rail always fills the viewport height.
buttonSize	60	Diameter of the corner launcher bubble in px.
zIndex	999999	Stacking order of the widget container. Raise it if a fixed header of yours covers the panel.
displayMode	"bubble"	"sidebar" docks a full-height right rail instead — see Docked sidebar mode.
renderMode	"iframe"	"native" draws the panel in your page instead of an iframe — see Native (in-page) render mode.
welcomeMessage	"Hi! How can I help you today?"	First assistant message. Native render mode only — in the default iframe mode the greeting comes from the chatbot's own settings.
showWelcome	true	Set false to open with no greeting. Native render mode only.

Mobile

On screens 768px and narrower the panel goes near-fullscreen and width / height are ignored.

iFrame Embed

Embed as an iframe:

<iframe
  src="https://your-chatbot.wizchat.app"
  width="400"
  height="600"
  frameborder="0"
></iframe>

Docked sidebar mode

By default the script embed shows the chatbot as a corner bubble that opens a floating panel. You can instead dock it as a full-height right rail that pushes your page content aside when it opens — a more integrated look for documentation sites and apps. Opt in with displayMode: "sidebar":

<script>
  window.chatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    displayMode: "sidebar",      // "bubble" (default) or "sidebar"
    reflowTarget: "#content",    // optional: CSS selector of the element to
                                 // push aside; omit to auto-detect
    showLauncher: false          // optional: hide the corner launcher bubble
  };
</script>
<script src="https://your-chatbot.wizchat.app/embed.js" async></script>

Options for sidebar mode:

Option	Default	Description
displayMode	"bubble"	Set to "sidebar" for the docked right rail. Any other value falls back to the bubble.
reflowTarget	auto-detect	CSS selector of the element whose right margin is pushed to make room for the rail. When omitted, WizChat targets the Docusaurus root (#__docusaurus) if present, otherwise <body>.
showLauncher	true	Set to false to drop the corner launcher bubble and open the rail only from your own triggers (see below).
width	400	Rail width in pixels.

Opening the rail from your own UI. Add the attribute data-wizchat-open to any element on your page (for example a navbar "Ask AI" button) and clicking it toggles the widget. In sidebar mode, visitors can also toggle it with Ctrl/Cmd + /.

<button data-wizchat-open>Ask AI</button>

Mobile

On narrow screens the sidebar falls back to a full-width overlay and does not reflow the page.

Native (in-page) render mode

By default the script embed renders the chat UI inside an iframe. You can instead render the chat panel directly in your page — inside a Shadow DOM, so it stays CSS-isolated from your site — by setting renderMode: "native":

<script>
  window.chatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    renderMode: "native"        // "iframe" (default) or "native"
  };
</script>
<script src="https://your-chatbot.wizchat.app/embed.js" async></script>

In native mode the panel streams answers from the chatbot's public /api/chat-stream endpoint over Server-Sent Events — there is no iframe and no secret key in the browser (it calls the same CORS- and domain-gated public endpoint the widget already uses, gated by your allowed embedding domains). Model output is rendered through a small escape-first Markdown renderer that allows only a fixed subset — code, bold/italic, headings, lists, and http(s) links — so untrusted answer text can't inject HTML into your page.

renderMode is independent of displayMode: use native rendering with the default "bubble" corner popup or with the "sidebar" docked rail.

Option	Default	Description
renderMode	"iframe"	Set to "native" to draw the chat panel in the host page (Shadow DOM, no iframe). Any other value falls back to the iframe.

note

Native mode is additive — existing iframe embeds are unchanged unless you explicitly set renderMode: "native".

Custom Domains

For Business and Enterprise plans:

1. Go to "Settings" > "Domain"
2. Click "Add Custom Domain"
3. Enter your domain (e.g., chat.yourcompany.com)
4. Add the provided DNS records to your domain
5. Click "Verify"

Embedding a chatbot that requires login

Only matters for login-gated chatbots

If your chatbot is fully public (no login), the embed snippet above works on any site — skip this section. This applies when your chatbot requires login, or has features that unlock after a user signs in (for example an in-widget account assistant / copilot).

A web browser treats an embedded chat bubble as a small window into another website (an iframe). For privacy, browsers partition the login storage of a site shown inside a different site — so when a user signs in inside the widget, the browser drops that login and the chatbot behaves as if logged out. Anonymous chat still works; only the logged-in experience breaks.

The fix: serve the chatbot on a subdomain of the page that embeds it

Put the chatbot on a subdomain of the same site you embed it on, using Custom Domains. Because the chatbot and the host page are then the same site, the browser no longer partitions the login — signing in inside the widget persists, and logged-in features work.

Page hosting the widget	Give the chatbot this domain	Same site?	In-widget login
www.yourcompany.com	copilot.yourcompany.com	✅ yes	✅ works
www.yourcompany.com	yourbot.wizchat.app	❌ no (different site)	❌ won't persist

Setup (≈3 steps):

1. Custom Domain → add a subdomain of your site, e.g. copilot.yourcompany.com (add the CNAME at your DNS provider; WizChat issues the TLS certificate).
2. Embed on yourcompany.com using the standard snippet, pointed at that subdomain:

   <script>
     window.chatbotConfig = { chatbotId: "YOUR_CHATBOT_ID" };
   </script>
   <script src="https://copilot.yourcompany.com/embed.js" async></script>

3. Open the page, sign in inside the widget — the login now sticks.

The chatbot, its knowledge base, and all settings are unchanged — only the domain it's served from. (Email/password sign-in needs no extra configuration; if you use Google/SSO sign-in, also add the subdomain to Firebase Auth's authorized domains and any identity-provider redirect allowlist you manage.)

Embedding on a site that is NOT yours

The same-site approach covers embedding a login-gated widget on your own site (on a subdomain of it). Embedding a logged-in widget on a third party's domain that can't share a subdomain with the chatbot isn't supported yet — contact support@wizchat.com if you need that (it's on the roadmap).

Redeployment

Redeploy when you make changes to:

• Knowledge base content
• AI settings
• Appearance settings

To redeploy:

1. Go to the chatbot Edit page
2. Save your changes — a redeployment banner will appear when needed
3. Click the "Redeploy" button on the banner and confirm

note

Some changes take effect immediately without redeployment. Check the specific setting's documentation.

Deployment Status

Status	Description
Not Deployed	Chatbot has never been deployed
Deploying	Deployment in progress
Deployed	Live and accessible
Failed	Deployment failed (check errors)

Troubleshooting

Deployment Failed

Common causes:

• Missing required settings
• Invalid custom domain configuration
• Temporary service issue

Solution: Check error messages and retry.

Changes Not Appearing

Solution: Clear browser cache or use incognito mode to test.

Related

• Appearance & Branding
• Managing Chatbots
• Troubleshooting