search

JavaScript

Learning how to install Mighty Whitelabel in JavaScript

hashtag
Installation

hashtag
Step 1: Initialise the package in your HTML file:

For vanilla JavaScript projects, include the following scripts in your HTML file:

<script src="https://unpkg.com/mighty-academy-widget@latest/dist/mightyIframeIntegration.js"></script>
<script src="https://unpkg.com/mighty-academy-widget@latest/dist/mightyIframeIntegration.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    mightyIframeIntegration.authorizePackage('dark');
  });
</script>

hashtag
Step 2: Add to HTML - Use the mighty-widget or mighty-pagecomponent:

hashtag
Option 1 - mighty-widget

To show a widget as a sidebar when clicking a button:

Use the mighty-widget component in your app by wrapping a button in these tags:

hashtag
Option 2 - mighty-page

Initialize widget as a separate screen on your existing app route by using mighty-page:

is a component that allows displaying content onto a page via iFrame (without toggle events)

Example usage:

hashtag
Attributes

  • partnerId (required): The partner ID for displaying content.

  • targetUrl (optional): The URL of the course to display.

  • theme (optional): The theme for displaying the widget (dark or light).

  • percent (optional - only for mighty-widget) - % of screen width that is occupied by mighty-widget.

hashtag
Demo

To see the Widget usage examples, use the demo at https://mighty-widget.netlify.apparrow-up-right to see the possible integration options.

PreviousGeneral InstructionsNextReact

Last updated