React

Learning how to install Mighty Whitelabel in React environment

Installation

To use Mighty Widget in a React project, install it via npm:

npm install mighty-academy-widget

Usage

You can use mighty widget in 2 major ways: 1. As a sidebar on any existing website 2. As a separate learn section on separate URL, e.g: your-website.com/learn

Step 1 - Wrap your application with MightyWrapper:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MightyWrapper } from 'mighty-academy-widget';

ReactDOM.render(
  <React.StrictMode>
    <MightyWrapper>
      <App />
    </MightyWrapper>
  </React.StrictMode>,
  document.getElementById('root')
);

Step 2 - Initialize the Widget inside app:

Option 1: Show widget as a sidebar when clicking a button.

Use the MightyWidget component in your app by wrapping a button in these tags:

import React from 'react';
import { MightyWidget } from 'mighty-academy-widget';

const App = () => {
  return (
    <MightyWidget
      partnerId="TON1"
      targetUrl="https://app.mighty.study/courses/example"
      percent="50"
      theme="dark"
    >
      <button>Preview Widget</button>
    </MightyWidget>
  );
};

export default App;

Option 2: Initialize widget as a separate screen on your existing app route by using MightyPage: <MightyPage> is a React component that allows embedding a page with an iframe to display content from the Mighty platform based on parameters.

To install MightyPage - please set it up on the empty page of your application.

import React from 'react';
import { MightyPage } from 'mighty-academy-widget';

const App = () => {
  return (
    <div style={{ width: '100%', height: '100vh' }}> // custom styling parameters here, see "Solving styling problems" section for more info
      <MightyPage 
        partnerId="Magic_Ball" 
        targetUrl="https://app.mighty.study/courses/123/456/789" 
        theme="dark" />
    </div>
  );
};

export default App;