Installation
Add the Yaplet widget to any website with a single code snippet, or follow a platform-specific guide for WooCommerce, Shopify, WordPress, and popular JavaScript frameworks.
Embed Code
Adding the widget to your site takes a single script tag. Paste it just above the closing </body> tag on every page where you want the widget to appear.
Find your embed code
In your Yaplet dashboard, go to Brand → Chat widget and open the Install tab. The snippet shown there already has your widget's ID filled in, and the copy button puts it on your clipboard.
Add it to your site
Insert the snippet into your website's HTML, just above the closing </body> tag:
<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>
<script> and </script> tags — add them when you paste it into an HTML page. If you are copying the snippet from this page instead, replace YOUR_WIDGET_ID with the ID shown on the Install tab.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.
Yaplet.identify() are rejected unless they carry a hash of the user's ID, signed on your server. The secret for that is on the same Install tab, under Identity verification. Set it up before you ship identify(), or your signed-in users will stay anonymous in the inbox.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.