cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

To enable customers to start a conversation through your website you can create chip widgets with Webchat as a channel and embed them on your website. If you are looking for a customizable and mobile friendly integration after creating a widget here is what you can do and how to do it:

 

An advanced integration provides the same messaging capabilities with more customization (see table below) as well as a mobile friendly integration thanks to the available sdk.

 

Messaging bubble and chat previews

chip_sinchat.PNG

 

sinch_chat_window.png

 

Customization

ParameterTypeDescription
isLocationPickerEnabledbooleanToggles the location picker functionality in the chat widget.
isEmojiPickerEnabledbooleanToggles the emoji picker functionality in the chat widget.
isImagePickerAvailablebooleanToggles the image picker functionality in the chat widget.
isTollbarAvailablebooleanToggles whether the toolbar is available in the chat widget.
darkmodebooleanToggles dark mode.
showDefaultChatButtonbooleanToggles whether the default chat button is available in the chat widget.
showRefreshConversationButtonbooleanEnables the Refresh button. Works for anonymous users (without uuid and uuidHash).
chatPositionOffsetnumber or number[]Specifies the offset of the chat widget from the bottom right corner of the screen.
brandTextstringSets the brand text that displays in the top bar of the chat widget.
brandColorstringSets the brand color of the chat widget.
brandColorLightstringSets the light mode brand color.
brandColorDarkstringSets the dark mode brand color.
defaultAgent{
displayName?: string;
pictureUrl?: string;
}
Allows you to set either a custom client icon or a client name. In the case of the name, the first letter will be displayed in place of the image.

 

In the example above the widget has the default customization apart from:

  • brandColor: #008080 (bubble and header window color)
  • brandColorLight: #CCE3E3 (Text buble preview in light mode)
  • brandText: "Can be customized"
  • dakmode: False

 

What are the differences between a classic and an advanced widget ?

An advanced widget offers:

  • better customization options.
  • a better UI.
  • new features (push under development).

An advanced widget does not offer:

  • The possibility to add multiple channels to a widget.
  • The possibility to set the working hours.

 

Integrate with an advanced widget

To integrate with advanced Webchat widgets:

  1. Request to our support the required credentials and customization.
  2. Select the integrations you want to perform in the Integrations available sections.
    Each integration can have a different style and options.
    Multiple integrations can work in parallel
  3. Follow the step of the integration.

 

Integrations available

All these integrations require 3 parameters (project id, region, client id) that can be requests to our support.

Web sdk integration

Integrate this snippet of code on your website:

 

 

 

<script>
    var script = document.createElement('script');
  
    script.addEventListener("load", async () => {
      await SinchSdk.initialize();

        SinchSdk.setIdentity({
            clientId: `${clientId}`,
            projectId: `${projectId}`,
            region: `${region}`,
        });

        SinchSdk.Chat.mount({
        brandColor: '#008080',
        brandColorLight: '#CCE3E3',
        brandColorDark: '#003D3D',
        brandText:"Can be customized",
        });
    })
  
    script.src='https://cdn.sinch.com/sinch-chat/latest/sdk.js';
    document.head.appendChild(script);
</script>​

 

 

 

Replace the clientId, projectId and region values.
Customize your configuration to create the widget that will fit you website.
In the example above the brand colors and text are changed.

All parameters are referenced in the table above.

 

 

 

{
        brandColor: '#008080',
        brandColorLight: '#CCE3E3',
        brandColorDark: '#003D3D',
        brandText:"Can be customized"
}​

 

 

 

Learn more here about the Web sdk integration.

Android sdk

This integration requires:

  1. Android Studio and Android SDK tools available here .
  2. Android 5.0 Lollipop - min SDK 21
  3. Access to SDK GitHub repository (It is private, ask access to our support team)

Follow the steps here Android sdk

IOS sdk

This integration requires:

  1. Xcode 13+ and a familiarity with how to use the Xcode UI.
  2. Swift Package Manager (iOS 11+) OR Cocoapods (iOS 12+)
  3. Access to SDK GitHub repository(It is private, ask access to our support team)

Follow the steps here IOS sdk

Version history
Last update:
‎07-31-2023 01:32 AM
Updated by: