Install Yaplet

The JavaScript snippet is the universal way to add Yaplet to any website. Paste it once and the widget appears on every page. All platform-specific guides (Shopify, WordPress, Webflow, etc.) ultimately load this same snippet — so if you ever wonder what the script actually does, this is the reference.

Installing on a specific platform?

If your site runs on one of these platforms, use its dedicated guide — each one walks through the exact steps for that platform. On any other site, follow the universal snippet instructions below.

• Install on Shopify
• Install on WordPress
• Install on WooCommerce
• Install on Webflow
• Install on UNAS
• Install on Shoprenter
• Install on Wix
• Install on Squarespace
• Install with Google Tag Manager

Guides for more platforms, from BigCommerce, Framer and Ghost to Shoptet and Webnode, are in the More platforms section of this help center, together with the website builders that can't run the widget.

1. Open the Install tab

In the dashboard's left menu, go to Brand → (your brand) → Chat widget → Install. There is no Widgets entry in the sidebar any more, and no list of widgets to pick from — each brand has at most one chat widget, and this is it. If that menu is new to you, what a brand is in Yaplet explains the layout.

Your Widget ID is not shown as a field of its own, unless the tab asks where your website runs and you choose WordPress / WooCommerce. It is the widgetId value inside the script on this tab, and it is also the last part of the page's own web address (/dashboard/widgets/<widget id>). Several of the platform guides ask you for it, so it is worth knowing where it hides.

2. Copy the snippet

The script is printed directly on the Install tab, already filled in with your widget ID. The tab may first ask where your website runs: choose your platform, or Other website if it is not in the list, and the tab then shows the code in the form that platform needs. Copy it from the code block — there is no Embed button and no pop-up. Directly below it sits the Identity verification panel, which you will need later if you want signed-in users to appear by name rather than as anonymous visitors.

The snippet looks like this (with YOUR_WIDGET_ID replaced by your actual ID). When you paste the code into an HTML page or a field that expects HTML, it must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it.

<script>
!function (Yaplet, t, i) {
  if (!(Yaplet = window.Yaplet = window.Yaplet || []).invoked) {
    var widgetId = "YOUR_WIDGET_ID";
    for (window.YapletActions = [], Yaplet.invoked = !0,
      Yaplet.methods = ["identify","setEnvironment","setTags",
        "attachCustomData","setCustomData","removeCustomData",
        "clearCustomData","registerCustomAction","trackEvent","log",
        "showSurvey","sendSilentCrashReport","startFeedbackFlow",
        "startBot","setAppBuildNumber","setAppVersionCode","setApiUrl",
        "setFrameUrl","isOpened","open","close","on","setLanguage",
        "setOfflineMode","initialize","disableConsoleLogOverwrite",
        "logEvent","hide","enableShortcuts","showFeedbackButton",
        "destroy","getIdentity","isUserIdentified","clearIdentity",
        "openConversation","openHelpCenterCollection",
        "openHelpCenterArticle","openNewsArticle","isLiveMode",
        "setFlowConfig","setAdminUrl","setWSApiUrl"],
      Yaplet.f = function (e) {
        return function () {
          var t = Array.prototype.slice.call(arguments);
          window.YapletActions.push({ e: e, a: t });
        }
      }, t = 0; t < Yaplet.methods.length; t++)
        Yaplet[i = Yaplet.methods[t]] = Yaplet.f(i);
    Yaplet.load = function (id) {
      var t = document.getElementsByTagName("head")[0],
          i = document.createElement("script");
      i.type = "text/javascript"; i.async = !0;
      i.src = "https://yaplet.com/api/sdk/loader?widgetId=" + encodeURIComponent(id);
      t.appendChild(i);
    };
    Yaplet.load(widgetId);
    Yaplet.initialize(widgetId);
  }
}();
</script>

3. Paste it into your website

Paste the snippet just before the closing </body> tag on every page where you want the widget to appear — the same instruction the Install tab gives you. Most sites have a shared footer template or layout file where you can add it once.

If you use a JavaScript framework, here are common placement options:

• Plain HTML / static sites — paste directly into your HTML file before </body>.
• React / Next.js — add it to your root layout file (app/layout.tsx or pages/_document.tsx), or load it in a top-level useEffect.
• Vue / Nuxt — place it in app.vue or configure it in nuxt.config.ts via app.head.script.
• Google Tag Manager — add a Custom HTML tag with the snippet and set it to fire on all pages. Step by step: Install Yaplet with Google Tag Manager.

4. Verify it's working

Reload your site. You should see the Yaplet launcher button in the bottom-right corner of the page. Click it to confirm the widget opens correctly.

If the launcher doesn't appear, see Verify your installation for a step-by-step checklist and common fixes.

How the snippet works

The snippet does three things:

1. Creates a global window.Yaplet queue so you can call Yaplet.identify() and other methods before the SDK has finished downloading.
2. Asynchronously loads the Yaplet SDK from yaplet.com — it never blocks your page from rendering.
3. Calls Yaplet.initialize(widgetId) to start the widget.

The SDK itself loads the widget UI from embed.yaplet.com inside an iframe, so it can't affect your page styles or scripts.

What's next

Once the widget is on your site, identify your logged-in users so their name, email, and conversation history carry across sessions: Identify your logged-in users with custom data.