Install Yaplet on any website with the JavaScript snippet

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.

1. Find your widget ID

Every Yaplet workspace has one or more widgets, each with a unique ID. Log in to your Yaplet dashboard, click Widgets in the sidebar (under Platform Tools), and click the widget you want to install. The Widget ID is shown at the top of the page.

2. Copy the snippet

On the widget page, click the Embed button in the top-right. A modal opens with your ready-to-use embed code — your Widget ID is already filled in. Copy it.

The snippet looks like this (with YOUR_WIDGET_ID replaced by your actual ID):

<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",
        "preFillForm","showSurvey","sendSilentCrashReport",
        "startFeedbackFlow","startBot","setAppBuildNumber",
        "setAppVersionCode","setApiUrl","setFrameUrl","isOpened",
        "open","close","on","setLanguage","setOfflineMode",
        "initialize","disableConsoleLogOverwrite","logEvent","hide",
        "enableShortcuts","showFeedbackButton","destroy","getIdentity",
        "isUserIdentified","clearIdentity","openConversations",
        "openConversation","openHelpCenterCollection",
        "openHelpCenterArticle","openHelpCenter","searchHelpCenter",
        "openNewsArticle","openChecklists","startChecklist","openNews",
        "openFeatureRequests","isLiveMode","setFlowConfig"],
      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. 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.

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.