Installation

This guide will help you add the Traise Widget to your web application.

Quick Start (Recommended)

Paste this snippet into your HTML, before the closing </body> tag:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['TraiseWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','traise','https://widget.traise.app/v1/traise-widget.min.iife.js'));
  traise('init', { apiKey: 'your-api-key' });
</script>

This async loader queues commands until the script loads, so it's safe to place anywhere on the page.

Prerequisites

• Widget created in Traise - See Widget Setup to create a widget and get your API key
• HTTPS environment (required for production)
  • localhost and private IPs allowed for development
  • WebRTC requires secure context for voice calls
• Modern browser (Chrome 80+, Firefox 75+, Safari 13+, Edge 80+)

Manual Installation

If you prefer explicit script tags:

<script src="https://widget.traise.app/v1/traise-widget.min.iife.js"></script>
<script>
  const { init, show } = window.TraiseWidget;

  async function setupWidget() {
    const widget = await init({
      apiKey: 'your-api-key',
      mode: 'light',
      position: 'bottom-right'
    });

    if (widget) {
      show();
    }
  }

  document.addEventListener('DOMContentLoaded', setupWidget);
</script>

No CSS file is needed — the widget injects its own styles.

Versioned URLs

The widget is available at two URL patterns:

URL	Description
widget.traise.app/latest/traise-widget.min.iife.js	Always the latest version
widget.traise.app/v1/traise-widget.min.iife.js	Pinned to major version 1

Use the versioned URL (/v1/) in production to avoid unexpected breaking changes.

Integration Patterns

Async Loader vs Direct Global

The async loader (Quick Start snippet) queues commands before the script loads. Use this when adding the widget to static HTML:

traise('init', { apiKey: 'your-api-key' });

The direct global (window.TraiseWidget) gives you full API access after the script has loaded. Use this in application code:

const { init, show, makeCall } = window.TraiseWidget;
await init({ apiKey: 'your-api-key' });

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const { init, show } = window.TraiseWidget;
    init({ apiKey: 'your-api-key' }).then(() => show());
    return () => window.TraiseWidget.destroy();
  }, []);

  return <div>My App</div>;
}

Vue

import { onMounted, onUnmounted } from 'vue';

onMounted(async () => {
  const { init, show } = window.TraiseWidget;
  await init({ apiKey: 'your-api-key' });
  show();
});

onUnmounted(() => {
  window.TraiseWidget.destroy();
});

Verification

Check Installation

1. Console Check: Open browser DevTools and check for any errors
2. Visual Check: Widget should appear in the configured position
3. Debug Mode: Enable debug mode to see detailed logs:

const { init } = window.TraiseWidget;
await init({
  apiKey: 'your-api-key',
  debug: true
});

4. Test Functionality:

const { getStatus } = window.TraiseWidget;
const status = getStatus();
console.log('Widget status:', status);
// { initialized: true, visible: false, websocket: true, voice: true, activeCall: false, unreadMessages: 0 }

Common Issues

Issue	Solution
Widget not appearing	Check API key and HTTPS requirement
"HTTPS Required" error	Use HTTPS or test on localhost
API connection failed	Verify API key and network connection
Voice calls not working	Check microphone permissions

Next Steps

• Configuration Options - Customize widget behavior
• API Reference - Complete API documentation
• Customization Guide - Theme and styling