Install the widget
One script tag on every page, with variants for Next.js, React, Vue and plain HTML.
Find your widget key in Settings, Install in the dashboard. It starts with pk_live_ and is safe to put in front end code.
Plain HTML
Paste this before the closing </body> tag on every page.
<script>
window.CorplandDesk=window.CorplandDesk||function(){(CorplandDesk.q=CorplandDesk.q||[]).push(arguments)};
CorplandDesk("init",{ key:"pk_live_..." });
</script>
<script async src="https://desk.api.corplandtechnologies.com/widget/v1/desk.js"></script>The first script defines a tiny queue so you can call CorplandDesk(...) anywhere, even before the loader arrives. Calls run in order once it does.
You can also pass the key as an attribute instead of an init call:
<script async src="https://desk.api.corplandtechnologies.com/widget/v1/desk.js" data-key="pk_live_..."></script>Next.js and React
Render this once in your root layout. Pass the signed in user so their history follows them across devices.
"use client";
import Script from "next/script";
type DeskUser = { id: string; name: string; email: string; userHash: string };
declare global {
interface Window {
CorplandDesk: (...args: unknown[]) => unknown;
}
}
export function CorplandDesk({ user }: { user?: DeskUser }) {
return (
<>
<Script id="corpland-desk-init" strategy="afterInteractive">{`
window.CorplandDesk=window.CorplandDesk||function(){(CorplandDesk.q=CorplandDesk.q||[]).push(arguments)};
CorplandDesk("init",{ key:"${process.env.NEXT_PUBLIC_DESK_KEY}" });
`}</Script>
<Script
src="https://desk.api.corplandtechnologies.com/widget/v1/desk.js"
strategy="lazyOnload"
onReady={() =>
user &&
window.CorplandDesk("identify", {
externalId: user.id,
name: user.name,
email: user.email,
userHash: user.userHash,
})
}
/>
</>
);
}Compute userHash on the server, never in the browser. See identity verification.
When the user signs out, call CorplandDesk("logout") so the next person on that browser starts fresh.
Vue
<script setup>
import { onMounted } from "vue";
onMounted(() => {
window.CorplandDesk = window.CorplandDesk || function () { (CorplandDesk.q = CorplandDesk.q || []).push(arguments) };
window.CorplandDesk("init", { key: "pk_live_..." });
const script = document.createElement("script");
script.async = true;
script.src = "https://desk.api.corplandtechnologies.com/widget/v1/desk.js";
document.body.appendChild(script);
});
</script>Check that it works
Open your site and look for the launcher in the bottom corner. In the dashboard, Settings, Install turns green the first time the widget loads and shows the site it loaded on.
Allowed sites
Anyone can read your widget key from your page source. To stop other sites from using it, add your domains under Settings, Hours and email, Allowed sites. Requests from other origins are refused.
What it costs your page
| Size, gzipped | When it loads | |
|---|---|---|
Loader desk.js | about 4 KB | On page load, async |
App app.js | about 18 KB | The first time someone opens the widget |
The widget renders in a shadow root, so your CSS cannot break it and its CSS cannot leak into your page. On phones it opens full screen.