Basic Usage

The following example is the simplest possible Web SDK initialization. Replace <clientId> and <projectId> with your Sinch Chat client ID and project ID.

Copy

Copied

const script = document.createElement('script');

script.addEventListener("load", async () => {
  await SinchSdk.initialize();

  await SinchSdk.setIdentity({
    clientId: `<clientId>`,
    projectId: `<projectId>`,
    region: 'EU',
  });

  SinchSdk.Chat.mount();
})

script.src = 'https://cdn.sinch.com/sinch-chat/latest/sdk.js';
document.head.appendChild(script);

Now let's break down the initialization logic:

initialize does the basic setup.
setIdentity initiates user identity within given Sinch Chat instance (indicated by combination of clientId , projectId and region ).
mount mounts Sinch Chat widget HTML within the host website.

The widget will be mounted in the Shadow DOM in which the chat logic and styles are encapsulated. This way it will not affect other elements, and the global styles will not affect the widget.