@meltingspot/meltingspot-js v0.3.2
Table of contents
Project description
The MeltingSpot Javascript SDK is a library that allows you to easily integrate MeltingSpot into your Javascript application.
Getting started
Installation
Please check the Embed helpdesk if you plan to embed MeltingSpot into your website through an iframe.
Usage
First you should load this library from jsDelivr inside the <head> tag of your application:
<html>
<head>
<!-- ... -->
<script
crossorigin
async
src="https://cdn.jsdelivr.net/npm/@meltingspot/meltingspot-js"
></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>Embed Meltingspot into your own app
You just need to add an element into the DOM that will wrap the embed and use window.MeltingSpot.injectSpotInto to embed your spot into your own app:
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<div id="meltingspot-frame" style="width:100%;height:100%"></div>
<script>
window.addEventListener('DOMContentLoaded', function () {
window.MeltingSpot.injectSpotInto('meltingspot-frame', {
spotId: 'YOUR_SPOT_ID',
themeMode: 'auto',
});
});
</script>
<!-- ... -->
</body>
</html>Embed a Meltingspot Widget into your own app
You will need to activate SSO in your spot before using this. You will find everything you need on the SSO activation here.
You just need to add an element into the DOM that will wrap the Widget and use window.MeltingSpot.injectWidgetInto to embed your Widget into your own app:
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<div id="meltingspot-widget" style="width:100%;height:100%"></div>
<script>
window.addEventListener('DOMContentLoaded', function () {
window.MeltingSpot.injectWidgetInto('meltingspot-widget', {
spotId: 'YOUR_SPOT_ID',
widgetId: 'YOUR_WIDGET_ID',
authToken: 'CURRENT_USER_MELTINGSPOT_SSO_TOKEN',
themeMode: 'auto',
});
});
</script>
<!-- ... -->
</body>
</html>You can also embed the widget without providing an authToken, everyone will only see public content:
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<div id="meltingspot-widget" style="width:100%;height:100%"></div>
<script>
window.addEventListener('DOMContentLoaded', function () {
window.MeltingSpot.injectWidgetInto('meltingspot-widget', {
spotId: 'YOUR_SPOT_ID',
widgetId: 'YOUR_WIDGET_ID',
themeMode: 'auto',
});
});
</script>
<!-- ... -->
</body>
</html>Widgets can also be added as modal or drawer inside your app, you will need to bind it to a button:
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<button id="meltingspot-open-widget-modal" type="button"></button>
<script>
window.addEventListener('DOMContentLoaded', function () {
window.MeltingSpot.bindWidgetModalTo('meltingspot-open-widget-modal', {
spotId: 'YOUR_SPOT_ID',
widgetId: 'YOUR_WIDGET_ID',
authToken: 'OPTIONAL_CURRENT_USER_MELTINGSPOT_SSO_TOKEN',
themeMode: 'auto',
});
});
</script>
<!-- ... -->
</body>
</html><html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<button id="meltingspot-open-widget-drawer" type="button"></button>
<script>
window.addEventListener('DOMContentLoaded', function () {
window.MeltingSpot.bindWidgetDrawerTo(
'meltingspot-open-widget-drawer',
{
position: 'right', // or 'left'
spotId: 'YOUR_SPOT_ID',
widgetId: 'YOUR_WIDGET_ID',
authToken: 'OPTIONAL_CURRENT_USER_MELTINGSPOT_SSO_TOKEN',
themeMode: 'auto',
},
);
});
</script>
<!-- ... -->
</body>
</html>