Vue

Where it goes

On Vue the snippet lives in the root component's mounted hook, or index.html for a static build. It is one script tag; it loads asynchronously and never blocks the page.

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

onMounted(() => {
  const w = window as any;
  if (w.SellioWidget && !Array.isArray(w.SellioWidget)) return; // already loaded
  w.sellioSettings = { widgetKey: "your-widget-key" };
  w.SellioWidget = w.SellioWidget || [];
  const s = document.createElement("script");
  s.src = "https://sellio.chat/widget/embed.js";
  s.async = true;
  document.head.appendChild(s);
});
</script>

Replace your-widget-key with the key from Settings, then Install. The key is public and safe to commit: it names the workspace and carries no permissions.

Steps

1. 1
   In Sellio, open Settings, then Install, and copy your widget key.
2. 2
   Add the loader once, in App.vue, from onMounted, as in the sample below. Vite's index.html works too if you would rather paste the plain snippet before </body>.
3. 3
   After a user signs in, call window.SellioWidget.setVisitor with their id, name and email so agents see who they are talking to.
4. 4
   Run the app; the launcher should be in the bottom corner.

Identify visitors

When your site knows who is signed in, tell the widget so the inbox shows a name and email instead of a visitor id. Safe to call before the loader has finished; commands queue until it is ready.

window.SellioWidget = window.SellioWidget || [];
window.SellioWidget.push(["setVisitor", {
  id: "your-user-id",
  name: "Ada Lovelace",
  email: "ada@example.com",
}]);

To stop anyone spoofing a name, sign the id on your server and pass it as userHash; see Identity verification.

Verify

Open the live site, send a message from the launcher, and check your inbox. If the launcher does not appear, the usual causes are a cache that still serves the old page, a visibility rule in Settings, then Visibility that hides it on this page or device, a domain missing from Allowed domains under Settings, then Install, or a snippet pasted into a page-level box rather than the site-wide one.