Socialboards
  • Developer hub
  • APIs
    • Ticket API
      • Getting Started
        • Guidelines and data privacy
      • Authorization
        • Access tokens
      • Categories
      • Custom Fields
      • Action Log
      • Notes
      • Replies
      • Tags
      • Tickets
      • Teammates
      • User Groups
      • Widgets
      • Webhooks
        • Getting Started
        • Create Endpoint
        • Configure the Webhooks
        • Testing your webhooks
      • Reference
        • Endpoints
          • Get Access Token v2
          • Get Full Community Category List
          • Get Subcategories by Parent Id
          • Get Category By Id
          • Get Full Community Custom Field List
          • Add Custom Field
          • Get Custom Field
          • Get All Teammates
          • Get All User Groups for Community
          • Update Custom Field
          • Delete Custom Field
          • Create Ticket
          • List Tickets
          • List Ticket Ids By Field Ids
          • Get Ticket by Id
          • Update Ticket Custom Field Value
          • Update Ticket Assignee
          • Get Ticket Log
          • Update Ticket Status
          • Update Ticket Category (Obsolete)
          • Update Ticket Category
          • Create Reply
          • List Replies
          • Add Note To Ticket
          • Update Note
          • Delete Note
          • List tags
          • Replace Ticket Tags
          • Replace Reply Tags
          • Get Widget Schedule List
        • API Request Result
        • Webhook Payload
        • Objects
          • Base Attachment
          • Category
          • Custom Field
          • Custom Field Id with Value
          • Custom Field Possible Value
          • Custom Field Value
          • Custom Times Widget Schedule
          • Note
          • Reply
          • Reply/Note Creator
          • Reply Properties
          • Schedule Time
          • Tag
          • Teammate
          • Ticket
          • Ticket Action Included Items
          • Ticket Creator
          • Ticket Id with Field Value
          • Ticket Log
          • Ticket Properties
          • User
          • User Group
          • Widget Schedule
        • Events
          • Ticket Creation
          • Ticket Status Change
          • Ticket Tags Change
          • Ticket Category Change
          • Reply Creation
          • Reply Update
          • Reply Deletion
          • Note Creation
          • Note Update
          • Note Deletion
        • Enumerations
          • Custom Field Types and Values Formats
          • Sentiment
          • Ticket Action Type
          • Ticket List Order By
          • Ticket Source
          • Ticket Status
          • User Role
          • Detailed Ticket Source
      • Glossary
    • External Chat API
      • Conversations Overview
      • Configure the Webhooks
      • Glossary
      • Reference
        • Endpoints
          • Create conversation
          • Add messages to conversation
          • Get conversation by id
          • List conversation messages
          • Get conversation queue information
          • Get takeover state
          • Change takeover state
          • Update conversation feedback
          • Update conversation latest url
          • Close conversation
        • Objects
          • Bot
          • Conversation
          • Conversation feedback
          • Conversation message
          • Conversation takeover
          • Conversation queue position
          • User
          • User Value
        • Events
          • Conversation created
          • Conversation Message Added
          • Conversation Takeover State Changed
          • Conversation Status Changed
        • Enumerations
          • Bot type
          • Order by
          • User status
          • Conversation Status
    • FAQ API
      • Glossary
      • Categories
      • FAQ Instances
      • Tags
      • Topics
      • Reference
        • Endpoints
          • List FAQ Instances
          • List Tags
          • List Categories
          • List Topics
          • Get Specific Topic
          • Add Vote to Topic
          • Increase View Count for Topic
          • Search Topics by Params
        • Objects
          • Attachment
          • Category
          • Instance
          • Tag
          • Topic
          • Topic Search Result
        • Enumerations
          • Localization Language
          • Template Type
          • Topic Downvote Reason
          • Topics Sort Options
    • Support Widget
      • Installation
      • Configuration options
      • Full script example
      • Javascript changelog
      • Widget schedule API
    • Reporting & Statistics
      • Data warehouse (DWH)
        • Entity relationship diagram (ERD)
        • Most used views and values
      • Reports and dashboards
  • Security
    • Introduction to Security
    • Data centers & network security
    • Product security features
    • Application security
    • Data Processing
    • Sub-Processors
      • 2023-04 Intility AS
        • Addendum 2023-4
  • Updates
    • Changelog
Powered by GitBook
On this page
  • Introduction
  • Messenger Object
  • Home Sub-object
  • Chat Sub-object
  • FAQ Sub-object
  • Form Sub-object
  • Launcher Object
  • Methods
  • Show or hide the messenger
  • Log in Chat users automatically
  • Adding custom data to the ticket

Was this helpful?

  1. APIs
  2. Support Widget

Configuration options

Make the support widget your own by configuration of the Launcher and Messenger objects.

Introduction

The widget supports a rich set of configuration options which allow you to customize the widgets appearance and behavior. The structure of the configuration object follows the logical structure of the widget.

var configuration = {
    community: 'COMMUNITY_NAME',
    moduleMask: 7,
    widgetId: 'WIDGET_ID',
    
    messenger: {}, // This object will configure the messenger window
    launcher: {} // This object will configure the launcher 
};

Attribute

Type

Description

Community

String

The name of you inbox as written in the url

Modulemask

Integer

A bit mask to enable modules. 1 = FAQ, 2 = Chat, 4= Form

WidgetID

Integer

The ID of the widget you wish to launch

initModule

Integer

Controls which module to load initially. Homepage = 0, FAQ = 1, Chat = 2, Forms = 3

Language

String

Set the language of the entire widget. Supports Norwegian ("nb"), Swedish ("sv"), Danish ("da"), Finnish ("fi") and English ("en"). Defaults to Norwegian.

Messenger Object

These attributes will modify the behaviour and appearance of the messenger.

messenger: {
    right: '20px',
    bottom: '85px',
    animationDirection: 'bottom-to-top',
    translate: '20px',
    
    // configure the home page
    home: {
        logoDimensions: { width: '150px', height: '50px' },
        chatLink: {
            order: 1,
            startChatText: 'Start Chat-Samtale',
            continueChatText: 'Fortsett Chat samtale'
        },
        faqLink: {
            order: 0,
            text: 'Ofte stilte spørsmål' //optional
        },
        formLink: {
            order: 2,
            text: 'Send e-post via skjema' //optional
        }
    },
    
    // configure the FAQ page
    faq: {
        areStickyTopicsFirst: false,
        faqCategoryId: null,
        faqName: 'demo',
    },
 
    // configure the contact page
    form: {
        formName: 'demo'
    },
 
    // configure the chat
    chat: {
        authenticationMask: 2,
        customFields: { someData: 'value' },
        contactInfo: { userName: 'John Doe', userEmail: 'john@doe.com' },
        queueBackgroundColor: 'white',
        queueFontSizeRem: '1rem',
        userMessageBackgroundColor: '#fefefe',
        agentMessageBackgroundColor: '#fefefe',
        botMessageBackgroundColor: '#ffffff'
    }

Attributes

Attribute

Obligatory

Type

Description

right/left/bottom/top

No

String

Absolute position of the messenger

animationDirection

No

String

Direction of the load animation

translate

No

String

Number of pixels for the load animation

Home Sub-object

The "home" page is the first page that loads after opening the widget. With these parameters, you can control the order of each module, and override the text settings for each of them. You can also adjust the logo which appears at the top of your messenger. All the parameters are optional.

Chat Sub-object

Control which authentication methods that will be presented to the user, and override default style settings.

Attribute

Type

Description

authenticationMask

Integer

A bit mask for enabling authentication methods. 1 = Anonymous, 2 = Email, 4 = Facebook, 8 = Google.

agentMessageBackgroundColor

String

Defines the background color of the agent chat bubbles.

botMessageBackgroundColor

String

Defines the background color of bot chat bubbles.

queueMessageBackgroundColor

String

Defines the background color of the queue element.

queueMessageFontSizeRem

String

Set the font size in Rem of the queue element.

FAQ Sub-object

Attributes optional. Overrides the default FAQ parameters.

Attribute

Type

Description

areStickyTopicsFirst

Boolean

Presents sticky articles before others.

faqCategoryId

Integer

Restricts FAQ articles from a specific category

faqName

String

Restricts FAQ articles from a specific FAQ

Form Sub-object

Optional. Used to specify which web-form that will be loaded into the messenger.

Attribute

Type

Description

formName

String

Defines which web-form to use.

Launcher Object

These attributes will modify the behavior of the launcher. Control where the launcher should appear on the screen, and replace the default launcher icons with your own icons. Should you wish to implement your own launcher, you then simply need to set enabled to false.

launcher: {
    enabled: true,
    height: '45px',
    width: '45px',
    right: '20px',
    bottom: '5px',
    launchIcon: 'https://socialboardsbproduction.blob.core.windows.net/123/1029879c-8f6f-4371-ae15-fbe4110931f4.png',
    dismissIcon: 'https://socialboardsbproduction.blob.core.windows.net/123/69327153-a772-4a43-a357-be3b97da0424.png'
}

Methods

Loading the JavaScript library provides an MagicWidget JavaScript object that responds to a few methods. These allow you to update users without a page refresh and interact with the messenger window.

Show or hide the messenger

To launch the messenger from other elements on your website, use the launchAsync method. To hide the chat, use the dismissAsync() method.

 magicWidget.launchAsync();
 magicWidget.dismissAsync();

You can subscribe to the launch state of the widget as shown below.

magicWidget.isLaunched$.subscribe(isLaunched => {
    console.log('widget is launched: ' + isLaunched);
});

This example shows how a given element is used to control the messenger.

    window.magicWidgetAsyncInit = function() {

        let isLaunched = false;

        function toggle() {

            if (isLaunched) {
                magicWidget.dismissAsync();
            } else {                        
                magicWidget.launchAsync();
            }

            isLaunched = !isLaunched;
        }

        magicWidget.initializeAsync(o)
            .then(function() { 

                var toggler = document.getElementById("mw-toggler");

                toggler.addEventListener("click", toggle);
                toggler.addEventListener("touchend", toggle);

                magicWidget.isLaunched$.subscribe(value => {
                    console.log('widget is launched: ' + value);
                });

             })
            .catch(function() { console.log('boo!') });
    }

Log in Chat users automatically

If you also know the name and email of your chat user, you can use the setContactInfo function to skip the login page.

magicWidget.setContactInfo({ userName: "John Doe", userEmail: "john@email.com" })

Adding custom data to the ticket

Attach any extra information to the ticket by using the setCustomFields function.

magicWidget.setCustomFields({ isLoggedIn: true })
PreviousInstallationNextFull script example

Last updated 8 months ago

Was this helpful?