Astro

Astro renders on the server, so load the widget from a client script.

npm i @shopassist/js

In a layout

Add the script to a layout that every page uses.

src/layouts/Base.astro

---
const { title } = Astro.props;
---

<html lang="en">
  <head><title>{title}</title></head>
  <body>
    <slot />

    <script>
      import ShopAssist from "@shopassist/js";
      ShopAssist({ shopDomain: "your-shop.com" });
    </script>
  </body>
</html>

Astro bundles and ships that <script> to the browser, so no directive is needed.

Opening the chat from your own button

<button id="chat">Chat with us</button>

<script>
  import { open } from "@shopassist/js";
  document.getElementById("chat")?.addEventListener("click", () => open());
</script>

In a React island

If you already use React islands, the bindings work as usual. Give the island a client:load directive so it runs in the browser.

src/components/ShopAssist.tsx

import { ShopAssistProvider } from "@shopassist/react";

export function ShopAssist() {
  return <ShopAssistProvider config={{ shopDomain: "your-shop.com" }} />;
}

---
import { ShopAssist } from "../components/ShopAssist";
---

<ShopAssist client:load />

With <ClientRouter />, page changes do not reload the document. The widget survives them, because it attaches to document.body and the package loads it once. Do not call ShopAssist() again on each navigation.

Next steps

Show question pills on a product page.
Configuration reference.

Astro

In a layout

Opening the chat from your own button

In a React island

Astro's own view transitions

Next steps

On this page