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
  • Installation
  • Initialize the widget

Was this helpful?

  1. APIs
  2. Support Widget

Installation

Implement your support widget on any webpage.

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.

Installation

Open the pages where you want to implement the widget, and add the following code close to the end body tag (</body>).

<script type="text/javascript">
    var scriptElement = document.createElement("script");
    scriptElement.async = 1;
    scriptElement.src = "https://magicwidget.socialboards.com/magic-widget.js";
    document.body.appendChild(scriptElement);
</script>

Initialize the widget

In the example above we have appended the script tag to the body with async enabled. This is recommended so that the rendering of your website is not blocked by the script. However, you will need to know when the script is done downloading and the widget is ready. This can be done by adding the following callback function to the window object which the widget will invoke when it's ready.

 window.magicWidgetAsyncInit = function() {
  // magicwidget is ready!
 }

The widget requires a configuration object to initialize.

Parameter

Obligatory

Type

Description

community

Yes

String

Name of your Socialboards Inbox

moduleMask

Yes

Integer

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

widgetId

No

Integer

The ID of your widget


window.magicWidgetAsyncInit = function() {

    var configuration = {
        community: 'COMMUNITY_NAME',
        moduleMask: 7,
        widgetId: 'WIDGET_ID'
    }; 
    
    magicWidget.initializeAsync(configuration)
        .then(function() {
            // initialization was successfull!
        })
        .catch(function(error) {
            // an error occured while initializing.
        });
}

PreviousSupport WidgetNextConfiguration options

Last updated 5 years ago

Was this helpful?