Installation | Yaplet

Embed Code

Adding the widget to your site takes a single script tag. Paste it just before the closing </body> tag on every page where you want the widget to appear.

Find your embed code

Go to Settings → Widget → Installation in your Yaplet dashboard. Your unique embed code is ready to copy.

Add it to your site

Insert the snippet into your website's HTML, just before the closing </body> tag:

HTML

<script>
!function (Yaplet, t, i) {
  if (!(Yaplet = window.Yaplet = window.Yaplet || []).invoked) {
    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 () {
      var t = document.getElementsByTagName("head")[0],
          i = document.createElement("script");
      i.type = "text/javascript", i.async = !0,
      i.src = "https://sdk.yaplet.com/latest/index.js",
      t.appendChild(i)
    }, Yaplet.load(),
    Yaplet.initialize("YOUR_WIDGET_ID")
  }
}();
</script>

Replace YOUR_WIDGET_ID with the widget ID shown in your dashboard. You can find the ready-to-copy embed code under Settings → Widget → Embed.

Verify it works

Reload your website. You should see the Yaplet launcher button in the bottom-right corner. Click it to open the widget and confirm everything loads correctly.

Framework-Specific Installation

If you're using a JavaScript framework, add the same script tag to your app shell or layout component:

Paste the embed code directly into your HTML file before </body>.

Add the script tag to your root layout file (app/layout.tsx or pages/_document.tsx), or load it in a useEffect hook on your top-level component.

Place the script in your app.vue or nuxt.config.ts via the app.head.script option.

Platform Guides

For specific platforms and content management systems, follow the dedicated step-by-step guides:

WooCommerce

Install the Yaplet widget on your WooCommerce store using the Insert Headers and Footers plugin — no code editing required.

Shopify

Add the widget to your Shopify store by pasting the embed script into your theme's layout file.

Webflow

Add the widget to your Webflow site through the built-in custom code settings — works on any paid plan.

Don't see your platform listed? The general embed code above works on any website that supports custom HTML. Paste the snippet into your site's footer template or use a tag manager like Google Tag Manager.