Framework Examples

Copy-pasteable setups for the most common frameworks. Each one installs the SDK and launches the flow; the /api/session endpoint is covered in Backend Integration.

These examples use debug: true, which logs the flow’s progress to the browser console while you develop. To receive the connected account in your code — to save it or update your UI — add the onSuccess / onError / onCancel callbacks.

React / Next.Js
Vue.js
Vanilla JS

'use client';

import { useEffect, useRef, useState } from 'react';
import { GatewayEmbeddedSignup, GatewayTheme } from '@connexease/gateway-embedded-signup';
import type { GatewayEmbeddedSignupInstance } from '@connexease/gateway-embedded-signup';

export function ConnectButton() {
  const widgetRef = useRef<GatewayEmbeddedSignupInstance | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    widgetRef.current = GatewayEmbeddedSignup.init({
      publishableKey: process.env.NEXT_PUBLIC_GATEWAY_PUBLISHABLE_KEY!,
      theme: GatewayTheme.Blue,
      logoUrl: 'https://yourapp.com/logo.png',
      debug: true,
    });
    return () => { widgetRef.current?.destroy(); widgetRef.current = null; };
  }, []);

  const handleClick = async () => {
    if (!widgetRef.current || loading) return;
    setLoading(true);
    try {
      await widgetRef.current.launch({
        fetchSessionToken: async () => {
          const res = await fetch('/api/session', { method: 'POST' });
          if (!res.ok) throw new Error('Failed to fetch session');
          return res.json();
        },
        isCoexistence: false,	
		secretKey: process.env.NEXT_PUBLIC_GATEWAY_SECRET_KEY,
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Connecting…' : 'Connect WhatsApp Business'}
    </button>
  );
}

Backend :

<template>
  <button @click="handleClick" :disabled="loading">
    {{ loading ? 'Connecting…' : 'Connect WhatsApp Business' }}
  </button>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { GatewayEmbeddedSignup, GatewayTheme } from '@connexease/gateway-embedded-signup';
import type { GatewayEmbeddedSignupInstance } from '@connexease/gateway-embedded-signup';

const loading = ref(false);
let widget: GatewayEmbeddedSignupInstance | null = null;

onMounted(() => {
  widget = GatewayEmbeddedSignup.init({
    publishableKey: import.meta.env.VITE_GATEWAY_PUBLISHABLE_KEY,
    theme: GatewayTheme.Blue,
    logoUrl: 'https://yourapp.com/logo.png',
    debug: true,
  });
});

onUnmounted(() => { widget?.destroy(); widget = null; });

async function handleClick() {
  if (!widget || loading.value) return;
  loading.value = true;
  try {
    await widget.launch({
      fetchSessionToken: async () => {
        const res = await fetch('/api/session', { method: 'POST' });
        if (!res.ok) throw new Error('Failed to fetch session');
        return res.json();
      },
      isCoexistence: false,
	  secretKey: process.env.NEXT_PUBLIC_GATEWAY_SECRET_KEY,
    });
  } finally {
    loading.value = false;
  }
}
</script>

<button id="connect-btn">Connect WhatsApp Business</button>

<script src="https://cdn.connexease.com/embedded-signup/v0/sdk.js" defer></script>
<script>
  const widget = window.GatewayEmbeddedSignup.init({
    publishableKey: 'pb_xxxxxxxxxxxxxxxxxxxxxx',
    theme: 'blue',
    logoUrl: 'https://yourapp.com/logo.png',
    debug: true,
  });

  document.getElementById('connect-btn').onclick = function () {
    widget.launch({
      fetchSessionToken: async function () {
        const res = await fetch('/api/session', { method: 'POST' });
        if (!res.ok) throw new Error('Failed to fetch session');
        return res.json();
      },
      isCoexistence: false,
	  secretKey: 'sk_xxxxxxxxxxxxxxxxxxxxxx',
    });
  };
</script>

const CONNEXEASE_SECRET_KEY = process.env.GATEWAY_SECRET_KEY;
const CONNEXEASE_API_BASE = process.env.GATEWAY_CORE_API_URL ?? 'https://public-api.gateway.connexease.com';
const SESSIONS_API = `${CONNEXEASE_API_BASE}/public/api/v1/wa/embedded-signup/sessions`;

export async function POST() {
  try {
    const res = await fetch(SESSIONS_API, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${CONNEXEASE_SECRET_KEY}`,
        'Content-Type': 'application/json',
      },
    });

    const data = await res.json();
    if (!res.ok) return Response.json(data, { status: res.status });

    // Connexease wraps the payload as { data: {...}, isSuccess: true }
    return Response.json((data as any).data ?? data);
  } catch {
    return Response.json({ error: 'Failed to fetch session' }, { status: 500 });
  }
}

.env:

NEXT_PUBLIC_GATEWAY_PUBLISHABLE_KEY=pb_xxxxxxxxxxxxxxxxxxxxxx
GATEWAY_SECRET_KEY=sk_xxxxxxxxxxxxxxxxxxxxxx
GATEWAY_CORE_API_URL=https://public-api.gateway.connexease.com  # optional; defaults to production

Only NEXT_PUBLIC_-prefixed vars reach the browser. GATEWAY_SECRET_KEY has no prefix, so it stays server-side in the Route Handler only.Reminder: NEXT_PUBLIC_ values are baked in at build/dev-server start. If you add or change one, restart the dev server — it won’t hot-reload.

Getting Started

Guides