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);
});
magicWidget.unreadChatMessages$.subscribe(function(count) {
console.log("total number of unread chat messages: " + count);
});
};
</script>
</body>
</html>