JavaScript SDK

npmpnpmyarnbun
npm install @xenia-martech/sdk-js
Copy

Copy<script src="https://cdn.jsdelivr.net/npm/@xenia-martech/sdk-js@1/dist/xenia-sdk.iife.js"></script>

Copy// app/api/xenia-token/route.ts (any framework with route handlers works the same way)
import { createTokenRoute } from "@xenia-martech/sdk-js/server";
 
export const GET = createTokenRoute({ sdkToken: process.env.XENIA_SDK_TOKEN! });

Copy<XeniaProvider
  tenantId="<workspace id>"
  environmentKey="<environment>"
  getToken={() => fetch("/api/xenia-token").then((r) => r.json()).then((r) => r.token)}
>

Copyimport { createXeniaServer, getVisitorId } from "@xenia-martech/sdk-js/server";
import { contextFromUrl } from "@xenia-martech/sdk-js";
 
const xenia = createXeniaServer({
  tenantId: process.env.XENIA_TENANT_ID!,
  environmentKey: process.env.XENIA_ENV_KEY!,
  token: process.env.XENIA_SDK_TOKEN,
  visitorId: getVisitorId(request.headers.get("cookie")) ?? undefined,
  context: contextFromUrl(request.url, request.headers.get("referer") ?? undefined),
});
 
const offer = await xenia.webhook("<trigger id>", { source: "backend" }, { fallback: null });
const hero = await xenia.resolve("homepage-hero", { merge: true, fallback: null });

Copy// proxy.ts (middleware.ts before Next 16)
import type { NextRequest } from "next/server";
import { xeniaProxy } from "@xenia-martech/sdk-js/next";
 
// Mints the xenia_vid cookie for new visitors and stamps the page URL on the request
export const proxy = (request: NextRequest) => xeniaProxy(request);

Copy// Any Server Component, Server Action or Route Handler
import { consentFromNext, xeniaServerFromNext } from "@xenia-martech/sdk-js/next";
 
const xenia = await xeniaServerFromNext(config); // bound to this visitor and page
const res = await xenia.webhook("<trigger id>", {}, { fallback: null });
 
// In a Server Action, after a form submit
const consent = await consentFromNext();
if (consent.analytics) {
  await xenia.identify({ email });
  await xenia.track("formSubmitted", { eventId: `contact-${ref}`, consent });
}

Copyimport { consentCookie } from "@xenia-martech/sdk-js";
 
document.cookie = consentCookie({ analytics: true, consentSource: "banner" });

Copy"use client";
import { XeniaProvider, useWebhook } from "@xenia-martech/sdk-js/client/react";
 
function OfferButton({ triggerId }: { triggerId: string }) {
  const { send, isLoading } = useWebhook(triggerId);
  return (
    <button onClick={() => void send({ page: "storefront" })} disabled={isLoading}>
      {isLoading ? "Finding your offer…" : "Reveal my offer"}
    </button>
  );
}
 
export function WelcomeOffer({ triggerId }: { triggerId: string }) {
  return (
    <XeniaProvider tenantId="<workspace id>" environmentKey="<environment>" getToken={getToken}>
      <OfferButton triggerId={triggerId} />
    </XeniaProvider>
  );
}