Add Ringnity to a website

Choose the install style

Use this when you want Ringnity to show the default floating support button. Visitor SDK loads the tenant config, checks allowed domain, and renders the launcher.

<script src="https://api.ringnity.com/sdk/ringnity.js"></script>
<script>
  Ringnity.init({
    slug: 'your-tenant-slug',
    visitor: {
      name: 'Website Visitor'
    },
    managedUi: {
      defaultService: 'chat',
      launcherText: 'Support',
      launcherLabel: 'Open Ringnity support',
      position: 'bottom-right',
      closeOnEscape: true
    },
    onStatusChange: function (status) {
      console.log('Ringnity status:', status);
    },
    onReady: function () {
      console.log('Ringnity is ready');
    },
    onError: function (error) {
      console.warn(error.code, error.message);
    }
  });
</script>

Use this in React, Next.js, Vue, or any frontend app with a build step. The Visitor SDK methods are the same as script tag; only the loading style changes.

import { Ringnity } from '@ringnity/web-sdk';

const ringnity = await Ringnity.create({
  slug: 'your-tenant-slug',
  visitor: {
    externalId: 'customer-123',
    name: 'Aira Kirana'
  },
  managedUi: {
    showLauncher: false,
    closeOnEscape: true
  }
});

document.querySelector('#chatButton')?.addEventListener('click', () => {
  void ringnity.openChat();
});

await ringnity.devices.registerPushToken({
  platform: 'web',
  provider: 'fcm',
  token: webPushToken,
  audience: 'customer',
  externalId: 'customer-123'
});

Headless means Ringnity prepares the visitor runtime but does not decide your UI. You can place your own Chat, Voice, and Video buttons anywhere.

<button id="chat">Chat with us</button>
<button id="voice">Start voice call</button>
<button id="video">Start video call</button>

<script src="https://api.ringnity.com/sdk/ringnity.js"></script>
<script>
  async function setupRingnity() {
    const ringnity = await Ringnity.create({
      slug: 'your-tenant-slug',
      visitor: {
        externalId: 'crm-customer-123',
        name: 'Aira Kirana',
        email: 'aira@example.com'
      },
      metadata: {
        source: 'pricing-page'
      }
    });

    document.querySelector('#chat').onclick = function () {
      ringnity.openChat();
    };

    document.querySelector('#voice').onclick = function () {
      ringnity.openVoice();
    };

    document.querySelector('#video').onclick = function () {
      ringnity.openVideo();
    };
  }

  setupRingnity();
</script>

Use this style when Ringnity should live inside a CRM sidebar instead of a floating launcher. The customer app controls where the support window appears.

<aside id="support-panel"></aside>

<script type="module">
  import { Ringnity } from '@ringnity/web-sdk';

  const ringnity = await Ringnity.create({
    slug: 'your-tenant-slug',
    tokenProvider: fetchRingnityRuntimeToken,
    managedUi: {
      showLauncher: false,
      defaultService: 'chat',
      container: '#support-panel'
    }
  });

  ringnity.mount('#support-panel');
  await ringnity.openChat();

  // When the CRM tab closes:
  ringnity.unmount();
</script>

Command cheat sheet

Use this style when the customer has a CRM sidebar, member portal, or custom chat screen. Ringnity handles session, entitlement, and service checks; your UI renders the messages.

const ringnity = await Ringnity.create({
  slug: 'your-tenant-slug',
  visitor: {
    externalId: 'customer-123',
    name: 'Aira Kirana'
  }
});

const conversation = await ringnity.chat.createConversation({
  subject: 'Need help with my order'
});
const conversationId = conversation.conversationId;

ringnity.chat.onMessage((message) => {
  renderMessage(message);
});

await ringnity.chat.sendMessage({
  conversationId,
  body: 'Hi, I need help.'
});

await ringnity.ai.streamChat(
  {
    conversationId,
    message: 'Summarize this issue for the agent.'
  },
  {
    onDelta: (event) => appendAiText(event.data.delta),
    onDone: (event) => saveAiAnswer(event.data.message),
    onError: (event) => showError(event.data.message)
  }
);

const call = await ringnity.calls.createSession({
  conversationId,
  type: 'audio'
});