This section details the various properties you can provide to the Chat SDK.

These properties are used for various display, feature, and application settings.

Before utilizing these settings, make sure you’ve integrated the ASAPP SDK script on your page.

Once you’ve integrated the SDK with your site, you can use the JavaScript API for applying these settings.

The properties available to the ASAPP Chat SDK include:

Each property has three attributes:

  • Key - provides the name of the property that you can set.
  • Available APIs - lists the JavaScript APIs that the property is accepted on.
  • Value Type - describes the primitive type of value required.

​
APIHostName

  • Key: APIHostName
  • Available APIs: Load
  • Value Type: String

Sets the ASAPP APIHostName for connecting customers with customer support.

​
AppId

  • Key: AppId
  • Available APIs: Load
  • Value Type: String

Your unique Company Identifier.

​
ContextProvider

The ASAPP ContextProvider is used for passing various information about your users to the Chat SDK. This information may include authentication, analytics, or session information. Please see the in-depth section on Using the ContextProvider for details about each of the use cases.

​
CustomerId

The unique identifier for an authenticated customer. This value is typically a customer’s login name or account ID. If setting a CustomerId you must also provide a ContextProvider property to pass along their access token and any other required authentication properties.

​
Display

  • Key: Display
  • Available APIs: Load
  • Value Type: Object

The Display setting allows you to customize the presentation aspects of the Chat SDK. The setting is an object that contains each of the customization’s you wish to provide.

Read on below for the currently supported keys:

ASAPP('load', 
{   "APIHostname": "example-co-api.asapp.com",
    "AppId": "example-co",
    "Display": {
        "Align": "left",
        "AlwaysShowMinimize": true,
        "BadgeColor": "rebeccapurple",
        "BadgeText": "Support",
        "BadgeType": "tray",
        "FrameDraggable": true,
        "FrameStyle": "sidebar",
        "HideBadgeOnLoad": false,
        "Identity": "electronics"
    }
}

​
Align

  • Key: Align
  • Value Type: String
  • Accepted Values: 'left', 'right' (default)

Renders the Chat SDK Badge and iframe on the left or right side of your page.

​
AlwaysShowMinimize

  • Key: AlwaysShowMinimize
  • Value Type: Boolean

Determines if the iframe minimize icon displays in the Chat SDK’s header. The default false value displays the button only on tablet and mobile screen sizes. When set to true, the button will also be visible on desktop-sized screens.

​
BadgeColor

  • Key: BadgeColor
  • Value Type: String
  • Accepted Values: Color Keyword,RGB hex value

Customizes the background color of the Chat SDK Badge.

This will be the primary color of Proactive Messages and Channel Picker if the PrimaryColor is not provided.

​
BadgeText

  • Key: BadgeText
  • Value Type: String

Applies a caption to the Chat SDK Badge.

This setting only works when applying the BadgeType:tray.

​
BadgeType

  • Key: BadgeType
  • Value Type: String
  • Accepted Values: 'tray','badge'(default) , 'none'

BadgeType: 'tray'

BadgeType: 'badge'

Customizes the display of the Chat SDK Badge. When you set the type to 'tray', you may also enter a BadgeText value. When you set this to ‘none’, the badge will not render.

​
FrameDraggable

  • Key: FrameDraggable
  • Value Type: Boolean

Enabling this setting allows a user to reposition the placement of the Chat SDK iframe.

When this is set to true, a user can hover over the frame’s heading region, then click and drag to reposition the frame. The user’s frame position will be recalled as they navigate your site or minimize/open the Chat SDK.

If the user has repositioned the frame, a button will appear allowing them to reset the Chat SDK to its default position.

​
FrameStyle

  • Key: FrameStyle
  • Value Type: String

Accepted Values: 'sidebar', 'default' (default)

Customizes the layout of the Chat SDK iframe.

By default, the frame will appear as a floating window with a responsive height and width. When set to 'sidebar', the frame will be docked to the side of the page and take 100% of the browser’s viewport height. The'sidebar' setting will adjust your page’s content as though the user resized their browser viewport.

Use the Align setting if you wish to change which side of the page the frame appears on.

​
HideBadgeOnLoad

  • Key: HideBadgeOnLoad
  • Value Type: Boolean
  • Accepted Values: 'true','false'(default)

When set to true, Chat Badge is not visible on load. You can open the Chat SDK iframe via Proactive Message, Chat Instead, or Show API.

Once you open the Chat SDK iframe, Chat Badge will become visible allowing a user to minimize/reopen.

​
Identity

  • Key: Identity
  • Value Type: String

A string that represents the branding you wish to display on the SDK. Your ASAPP Implementation Manager will help you determine this value.

If set to a non-supported value the Chat SDK will display in a generic, non-branded experience.

​
PrimaryColor

  • Key: PrimaryColor
  • Value Type: String
  • Accepted Values: Color Keyword,RGB hex value

Customizes the primary color of Proactive Messages and Chat Instead.

This will be the background color of the Chat SDK Badge if the BadgeColor is not provided.

​
Intent

  • Key: Intent
  • Available APIs: Load
  • Value Type: String

The intent code that you wish for a user’s conversation to initialize with. The setting takes an object, with a required key of Code. Code accepts a string.

Your team and your ASAPP Implementation Manager will determine the available values.

ASAPP('load', {
    APIHostname: 'example-co-api.asapp.com',
    AppId: 'example-co',
    Intent: {
        Code: 'PAYBILL'
    }
});

​
onLoadComplete

  • Key: onLoadComplete
  • Available APIs: Load
  • Value Type: Function

A callback that is triggered once the Chat SDK has finished initializing. This is useful when attaching events via the Action API or whenever you need to perform custom actions to the SDK after it has loaded.

The provided method receives a single argument as a boolean value. If the value is false, then the page is not configured to display under the ASAPP Trigger feature. If the value is true, then the Chat SDK has loaded and finished appending to your DOM.

ASAPP('load', {
    APIHostname: 'example-co-api.asapp.com',
    AppId: 'example-co',
    onLoadComplete: function (isDisplayingChat) {
        console.log('ASAPP Loaded');
        if (isDisplayingChat) {
            ASAPP('on', 'message:received', handleMessageReceivedEvent);
        } else {
            console.log('ASAPP not enabled on this page');
        }
    }
});

​
RegionCode

  • Key: RegionCode
  • Available APIs: Load
  • Value Type: String

Localizes the Chat SDK with a certain region. It accepts a value from the ISO 3166 alpha-2 country codes representing the country you wish to localize.

​
Sound

  • Key: Sound
  • Available APIs: Load
  • Value Type: Boolean

When set to true, users will receive an audio notification when they receive a message in the chat log. This defaults to false.

​
UserLoginHandler

  • Key: UserLoginHandler
  • Available APIs: Load
  • Value Type: Function

The UserLoginHandler allows you to provide a means of authentication so a user may access account information via the ASAPP Chat SDK. When the Chat SDK determines that a user is unauthorized, a “Log In” button appears. When the user clicks that button, the Chat SDK will call the method you provided. See the Authentication page for options on how you can authenticate your customers. Note: If you do not provide a UserLoginHandler, a user will not be able to transition from an anonymous to an authorized session.

When the Chat SDK calls the UserLoginHandler, it provides a single argument.

The argument is an object and contains various session information that may be useful to your integration. You and your Implementation Manager determine the information provided.

It may contain things such as CompanySubdivision, ExternalSessioninformation, and more.

ASAPP('load', {
    APIHostname: 'example-co-api.asapp.com',
    AppId: 'example-co',
    UserLoginHandler: function (data) {
        if (data.CompanySubdivision === 'chocolatiers') {
            // Synchronous login
            window.open('/login?makers=tempering')
        } else {
            // Get Customer Id and access_token ...
            var CustomerId = 'Retrieved customer ID';
            var access_token = 'Retrieved access token';
            // Call SetCustomer with retrieved access_token, CustomerId, and ContextProvider
            ASAPP('setCustomer', {
                CustomerId: CustomerId,
                ContextProvider: function (callback) {
                    var context = {
                        Auth: {
                            Token: access_token
                        }
                    };
                    callback(context);
                }
            });
        }
    }
});

Was this page helpful?

Web JavaScript APIContextProvider