Transactional

Quick Start

Set up live chat in 5 minutes

Quick Start

Get live chat running on your website in just a few minutes.

Prerequisites

  • A Transactional account
  • An organization set up
  • Access to your website's code

Step 1: Create an Inbox

  1. Navigate to Support > Inboxes
  2. Click Create Inbox
  3. Enter inbox details:
    • Name: "Website Support"
    • Description: "General website inquiries"
  4. Click Create

Step 2: Get the Embed Code

  1. Go to Support > Inboxes > Your Inbox > Settings
  2. Enable the Chat Widget toggle
  3. Scroll to the Embed Code section
  4. Copy the JavaScript embed code

Step 3: Add the Widget

Add this script before the closing </body> tag:

<!-- Transactional Support Widget -->
<script>
  (function(w,d,s,o,n,f,js,fjs){
    w[o]=w[o]||{};w[o][n]=w[o][n]||function(){(w[o][n].q=w[o][n].q||[]).push(arguments)};
    w[o][n].l=1*new Date();js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o+'_'+n;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','Transactional','support','https://cdn.usetransactional.com/sdk/support.min.js'));
 
  Transactional.support('init', { inboxId: 'YOUR_INBOX_ID' });
</script>

Replace YOUR_INBOX_ID with your inbox ID from the settings page.

Step 4: Test the Widget

  1. Open your website
  2. Look for the chat bubble in the bottom right corner
  3. Click it to open the chat
  4. Send a test message

Step 5: Respond to Messages

  1. Go to the Support dashboard
  2. Click on Inbox
  3. You should see your test message
  4. Reply to it

The visitor will receive your reply in real-time.

Identifying Users

When users log in to your application, identify them:

// Call this when user logs in
Transactional.support('identify', 'user-123', {
  email: 'john@example.com',
  name: 'John Doe',
  plan: 'premium'
});

This links conversations to specific users and enables:

  • Viewing user details in conversations
  • Reaching out to specific users
  • Building user profiles

Associate with Company

Link users to their company for B2B support:

Transactional.support('company', 'company-456', {
  name: 'Acme Inc',
  plan: 'enterprise',
  industry: 'Technology'
});

Track Events

Track user behavior for context in conversations:

Transactional.support('trackEvent', 'purchase_completed', {
  orderId: 'order-123',
  amount: 99.99
});

React / Next.js Integration

Create a client component that loads the widget:

'use client';
 
import { useEffect } from 'react';
import { useUser } from './hooks/useUser';
 
declare global {
  interface Window {
    Transactional: {
      support: (command: string, ...args: unknown[]) => void;
    };
  }
}
 
const SUPPORT_CDN_URL = 'https://cdn.usetransactional.com/sdk/support.min.js';
const INBOX_ID = process.env.NEXT_PUBLIC_SUPPORT_INBOX_ID;
 
export function SupportWidget() {
  const { user, isAuthenticated } = useUser();
 
  useEffect(() => {
    (function(w,d,s,o,n,f,js,fjs){
      w[o]=w[o]||{};w[o][n]=w[o][n]||function(){(w[o][n].q=w[o][n].q||[]).push(arguments)};
      w[o][n].l=1*new Date();js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
      js.id=o+'_'+n;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    }(window,document,'script','Transactional','support', SUPPORT_CDN_URL));
 
    window.Transactional.support('init', { inboxId: INBOX_ID });
 
    return () => {
      window.Transactional?.support?.('shutdown');
    };
  }, []);
 
  // Identify user when authenticated
  useEffect(() => {
    if (isAuthenticated && user) {
      window.Transactional.support('identify', user.id, {
        name: user.name,
        email: user.email,
        plan: user.plan
      });
 
      if (user.company) {
        window.Transactional.support('company', user.company.id, {
          name: user.company.name,
          plan: user.company.plan
        });
      }
    }
  }, [isAuthenticated, user]);
 
  return null;
}

Add to your layout:

import { SupportWidget } from '@/components/support-widget';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SupportWidget />
      </body>
    </html>
  );
}

Environment Variables

Add to your .env file:

NEXT_PUBLIC_SUPPORT_INBOX_ID=your-inbox-id

Common Configurations

Show Widget After Delay

setTimeout(() => {
  Transactional.support('show');
}, 5000);

Show on Specific Pages

if (window.location.pathname.includes('/support')) {
  Transactional.support('show');
} else {
  Transactional.support('hide');
}

Track Page Views (for SPAs)

router.events.on('routeChangeComplete', () => {
  Transactional.support('trackPageView');
});

Troubleshooting

Widget Not Showing

  1. Check browser console for errors
  2. Verify inbox ID is correct
  3. Check Content Security Policy allows the script
  4. Ensure the script is loaded

Messages Not Sending

  1. Check network tab for failed requests
  2. Verify WebSocket connection
  3. Check if user is rate-limited

User Not Identified

  1. Ensure identify is called after init
  2. Check user ID is a string
  3. Verify user data is valid

Next Steps