@meltingspot/meltingspot-js
TypeScript icon, indicating that this package has built-in type declarations

0.3.3 • Public • Published

🚀 MeltingSpot Javascript SDK

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @meltingspot/meltingspot-js

Weekly Downloads

190

Version

0.3.3

License

BSD-3-Clause

Unpacked Size

36 kB

Total Files

26

Last publish

Collaborators

  • fabien_ms
  • tech_meltingspot