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',
                         tags: ""
                     },
         
                     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>

Last updated