JS SDK

Integration

To add the Supsis Chat Widget to your website, you need to insert the code below at the top of every page on your site.

• The SUPSIS SDK is loaded asynchronously and does not affect page load speed.
• You can add it only to the pages where you want the chat widget to appear.
• The widget will be displayed once the Supsis SDK is loaded and the app is ready!!

Integration Code

<script>
  window.supsis = window.supsis || function () {
    (supsis.q = supsis.q || []).push(arguments);
  };
  supsis.l = +new Date;
</script>

<script
  src="https://SITE_DOMAIN_NAME.visitor.supsis.live/static/js/loader.js"
  type="text/javascript"
  async
  defer>
</script>

SITE_DOMAIN_NAME should be replaced with the domain name you provided when registering to Supsis.

If you came from IdeaSoft, your IdeaSoft domain name will be your Supsis domain name.

For example, if you log in via market71.supsis.live, then SITE_DOMAIN_NAME=market71.

SYNC API

The SYNC API is used with supsis. syntax. The ASYNC API is used with supsis() syntax.
API methods will be shown under ASYNC.

supsis("ready", (supsis) => {
    // you can use supsis synchronously in this scope

    supsis.open();
    supsis.setUserData({ name: "Ali", email: "a@a.com" });
});

Or you can load the SDK synchronously and run your code after this line.

Note: Loading synchronously may add a small overhead to your site loading speed.

<script src="https://SITE_DOMAIN_ADINIZ.visitor.supsis.live/static/js/loader.js" type="text/javascript">
    supsis.open()
    supsis.setUserData({name:'Ali',email:'a@a.com'})
</script>

ASYNC API

Since the Supsis SDK is loaded asynchronously, your API calls will run after it is loaded.

The ASYNC API structure is as follows:

supsis(API_FUNCTION_NAME, payload);

• "API_FUNCTION_NAME" is a string and represents the function name to be executed.
  • Equivalent: supsis.open() ===> supsis("open")
• payload is used if the function you call requires parameters.

Set Customer as VIP

supsis("setVisitorVip", false); // false = not VIP, true = VIP

Close Chat Bubble

supsis("minimize");

Hide Chat Bubble

supsis("hide");

Open Chat Screen

supsis("open");

End Conversation

supsis("closeChat");

Change Department

supsis("department", "$DEPARTMENT_TITLE");

• Department title values must be the same for all languages.

Update Visitor Information

If you provide your visitors' personal information to the Supsis SDK before they click the chat bubble and request support, their information will be automatically set. They can start a chat using the name and email from your system.

Note: If user data is not provided, the chat will start using the information collected from the Supsis Login Form.

Update Visitor Information for Default Login Form

supsis("setUserData", {
    name: "Name and Surname of the logged-in user",
    email: "Email address of the logged-in user",
});

Update Visitor Information for Custom Login Form

• Required fields in custom login forms: name, email
• You can extend other fields as you wish. Each field must have a name, which will be used to update visitor data remotely.

Let’s design a sample custom login form and add these fields:
(name, email, phone, identityNumber)

supsis("setUserData", {
    name: "John Doe",
    email: "jonh.doe@gmail.com",
    phone: "5396829048",
    identityNumber: "13451123445",
});

When you run the command above, the login form will be pre-filled.

Update Custom User Data (User Contact Properties)

• You can update custom user data created via the panel.
• For example, if a customer connects to live support and you want to get more detailed information about them, this feature will be useful.

Example Steps

• If you want to know your customer's membership level, follow the step below.

First, create a tag called User Rank and set the field value accordingly.

• Now we want to assign this User Rank tag to our customer.

supsis("ready", (supsis) => {
    // Listening to the event when Supsis is ready.
    // member data is retrieved from your website.
    const member = {
        badget: "gold_member",
        ...
    };
    supsis.setContactProperty({ badget: member.badget });
});