Install the chat widget

The widget is one script. It loads asynchronously, so it doesn't block your page, and it renders inside its own shadow DOM, so your site's CSS and the chat's CSS don't affect each other.

Find your workspace ID

Open Settings → Chat widget → Installation and choose Manual. Your workspace ID is shown below the snippet, with a copy button. The snippets in the dashboard already include it.

When you're signed in, the examples on this page already use your workspace ID. Otherwise, swap in the ID you copied from the dashboard.

Add the script

Load the widget once per page. On a plain website, place the tag just before the closing </body> tag. In a framework, put the component in your root layout (App, app/layout.tsx, +layout.svelte or App.vue) and render it once.

<script src="https://widget.giovchat.app/YOUR_WORKSPACE_ID" async></script>

import { useEffect } from "react";

export function GiovWidget() {
  useEffect(() => {
    if (document.getElementById("giovchat-widget")) return;

    const script = document.createElement("script");
    script.id = "giovchat-widget";
    script.src = "https://widget.giovchat.app/YOUR_WORKSPACE_ID";
    script.async = true;
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return null;
}

"use client";

import { useEffect } from "react";

export function GiovWidget() {
  useEffect(() => {
    if (document.getElementById("giovchat-widget")) return;

    const script = document.createElement("script");
    script.id = "giovchat-widget";
    script.src = "https://widget.giovchat.app/YOUR_WORKSPACE_ID";
    script.async = true;
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return null;
}

<script lang="ts">
  import { onMount } from "svelte";

  onMount(() => {
    if (document.getElementById("giovchat-widget")) return;

    const script = document.createElement("script");
    script.id = "giovchat-widget";
    script.src = "https://widget.giovchat.app/YOUR_WORKSPACE_ID";
    script.async = true;
    document.body.appendChild(script);

    return () => script.remove();
  });
</script>

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

let script: HTMLScriptElement | undefined;

onMounted(() => {
  if (document.getElementById("giovchat-widget")) return;

  script = document.createElement("script");
  script.id = "giovchat-widget";
  script.src = "https://widget.giovchat.app/YOUR_WORKSPACE_ID";
  script.async = true;
  document.body.appendChild(script);
});

onBeforeUnmount(() => script?.remove());
</script>

<!-- Add with a footer or code-injection plugin -->
<script src="https://widget.giovchat.app/YOUR_WORKSPACE_ID" async></script>

On WordPress, use a footer or code-snippet plugin and place the tag once, before the closing body tag.

Install with a coding agent

Settings → Chat widget → Installation → Agent assisted gives you a project-aware prompt for Codex, Claude Code, Cursor or another coding agent. Select Copy installation prompt and paste it into your agent. Your workspace ID is already included. The prompt asks the agent to load the widget once from your root layout, run your build, and report the files it changed.

Approve your domain

Register the websites allowed to embed your chat in Settings → Chat widget → Authorizations:

1. Set Type to Website URL.
2. Enter the site in Value, for example https://example.com.
3. Select Register.

A website can be registered by only one workspace. If someone else already registered it, you'll see "This URL or ID is already registered by another account."

Check the installation

1. Test connection. In Settings → Chat widget → Installation, the Connection check section confirms that your workspace's public widget configuration is reachable. It doesn't inspect your website.
2. Open your site. The launcher appears in the bottom-right corner by default. Send a test message and look for it in Inbox.

During onboarding, the Install step also detects the first time the chat loads on your site and shows Seen on with the host.

If the widget's stylesheet or configuration can't load, the widget removes itself instead of showing an unstyled chat.

Troubleshooting

Next

• Customize the widget
• Identify signed-in visitors
• JavaScript API
• Native apps: Mobile apps