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

Was this helpful?

  1. APIs
  2. Support Widget

Full script example

An example of the Support Widget installed on a webpage.

This example contains some text tweaks for our Norwegian customers.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>Magic Widget Example file</title>
   </head>
   <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>
      <script type="text/javascript">
          window.magicWidgetAsyncInit = function() {
          
              var configuration = {
                 community: 'demo',
                 moduleMask: 7,
                 messenger: {
                     right: '20px',
                     bottom: '85px',
                     animationDirection: 'right-to-left',
                     translate: '20px',
                     
                     home: {
                         logoDimensions: { width: '150px' },
                         chatLink: {
                             order: 1,
                             startChatText: 'Start Chat-Samtale',
                             continueChatText: 'Fortsett Chat samtale' 
                         },
                         faqLink: {
                             order: 0,
                             text: 'Ofte stilte spørsmål' 
                         },
                         formLink: {
                             order: 2,
                             text: 'Send e-post via skjema' 
                         }
                     },
                     
                     faq: {
                         areStickyTopicsFirst: false,
                         faqCategoryId: null,
                         faqName: 'demo',
                     },
         
                     form: {
                         formName: 'demo'
                     },
         
                     chat: {
                         authenticationMask: 2,
                         agentMessageBackgroundColor: '#fefefe',
                         botMessageBackgroundColor: '#ffffff'
                     } 
                 },
             
                 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'
                 }
             };
             
             magicWidget.initializeAsync(configuration)
                 .then(function() {
                     
                     // ready!
                     magicWidget.launchAsync();
                 })
                 .catch(function(error) {
                     
                     // something went wrong...
                     console.error(error);
                 });
                 
             magicWidget.isLaunched$.subscribe(function(isLaunched) {
                 
                 console.log("widget messenger window is launched: " + isLaunched);
             });
          };
      </script>
   </body>
</html>
PreviousConfiguration optionsNextJavascript changelog

Last updated 9 months ago

Was this helpful?