> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usefrictionless.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Install the website chat

> A chat button on every page of your website, answered from the same inbox as WhatsApp, Instagram and Messenger.

## Install

Paste this just before `</body>` on every page. Your Workspace ID is already filled in on **Integrations → Website chat**, which everyone on your team can open.

```html theme={null}
<script src="https://usefrictionless.com/widget/v1.js"></script>
<script>
  Frictionless.init({ company_id: "YOUR_WORKSPACE_ID" });
</script>
```

That's all you need for live chat. Everything below is optional.

## Check it worked

* Open **Integrations → Website chat** and leave it open. The Install tab checks by itself and turns green within seconds of your site loading the chat.
* On `localhost` it says **Testing**. It turns green once a real website loads it.
* Nothing? Open your browser's console. A wrong Workspace ID shows as an error starting with `[Frictionless]`.

## Options

Colour, button corner, chat size, opening on page load and the WhatsApp button are set without code in **Settings → Website chat**. Anything you pass to `init()` wins over those settings on that website.

```js theme={null}
Frictionless.init({
  company_id: "YOUR_WORKSPACE_ID",
  mode: "half",
  autoOpen: true,
});
```

<ParamField path="mode" type="string">
  How big the chat is when open. `"normal"` is the default window by the button, `"half"` takes one side of the screen, `"full"` takes the whole screen. On phones, all three fill the screen.
</ParamField>

<ParamField path="autoOpen" type="boolean">
  `true` opens the chat when the page loads, on every page, until the visitor closes it. After that it stays closed for the rest of their visit. It never opens by itself on phones, where it would cover your site.
</ParamField>

<ParamField path="launcher" type="boolean">
  `false` hides the chat button, so you can open the chat from [your own](/website-chat/control#your-own-button).
</ParamField>

<ParamField path="position" type="string">
  `"left"` or `"right"`: which corner the button sits in.
</ParamField>

<ParamField path="color" type="string">
  A hex colour, like `"#001F3E"`.
</ParamField>

<ParamField path="title" type="string">
  Header text. Defaults to your business name.
</ParamField>

<ParamField path="whatsapp" type="string">
  The number for the **Continue on WhatsApp** button, like `"2348012345678"`.
</ParamField>

<ParamField path="sound" type="boolean">
  `false` turns off the chime when a reply arrives.
</ParamField>

## WordPress, Shopify and site builders

<Tabs>
  <Tab title="WordPress">
    Install a plugin that adds code to the footer, such as WPCode, and paste the two lines into the footer section.
  </Tab>

  <Tab title="Shopify">
    **Online Store → Themes → ⋯ → Edit code → `theme.liquid`**. Paste just before `</body>` and save.
  </Tab>

  <Tab title="Webflow, Wix, Squarespace">
    Paste into the site-wide custom code setting for the footer, or end of body.
  </Tab>
</Tabs>

Using Next.js or React? See [Next.js and React](/website-chat/frameworks).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.