Nuxt

The widget needs a browser, so load it from a client-only plugin.

npm i @shopassist/js

Client plugin

Nuxt runs any file ending in .client.ts only in the browser.

plugins/shopassist.client.ts

import ShopAssist from "@shopassist/js";

export default defineNuxtPlugin(() => {
  ShopAssist({ shopDomain: "your-shop.com" });
});

That is the whole install. Nuxt loads the plugin once per page load, and the package loads the widget once per page.

Opening the chat from a component

components/HelpButton.vue

<script setup lang="ts">
import { open } from "@shopassist/js";
</script>

<template>
  <button @click="open()">Chat with us</button>
</template>

open is safe to import anywhere. On the server it does nothing, and in the browser a call made before the widget has loaded is held and replayed.

With runtime configuration

Keep the shop identifier in nuxt.config.ts rather than in the plugin.

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      shopAssistDomain: "your-shop.com",
    },
  },
});

plugins/shopassist.client.ts

import ShopAssist from "@shopassist/js";

export default defineNuxtPlugin(() => {
  const { public: config } = useRuntimeConfig();
  ShopAssist({ shopDomain: config.shopAssistDomain });
});

Question pills on a product page

There is no Vue component, so mount the pills onto an element yourself.

components/AskShopAssist.vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { mountQuestions } from "@shopassist/js";

const props = defineProps<{ handle: string; title?: string }>();
const el = ref<HTMLElement | null>(null);
let unmount: (() => void) | undefined;

onMounted(() => {
  if (!el.value) return;
  unmount = mountQuestions(el.value, {
    handle: props.handle,
    title: props.title,
    shopDomain: "your-shop.com",
  });
});

onUnmounted(() => unmount?.());
</script>

<template>
  <div ref="el" />
</template>

Next steps

Add to your cart from the chat.
Configuration reference.