@memoraiz/frames NPM

@memoraiz/frames

Easily integrate Memoraiz functionality into any website or application with the @memoraiz/frames package. This guide provides step-by-step instructions for embedding Memoraiz and configuring it to suit your needs.

Installation

Include the Memoraiz script on your website by adding the following <script> tag to your HTML:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@memoraiz/frames/dist/index.js"
  async
  onload="setupMemoraiz()"
></script>

Make sure to include styles on your page as well

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@memoraiz/frames/dist/style.css"
/>

Usage

Initialize Memoraiz

To initialize Memoraiz, include the following script block in your application:

<script>
  function initializeMemoraiz() {
    console.log('Setting up Memoraiz integration...');

    // Minimal User Configuration
    const user = {
      id: 'user123',
      displayName: 'Jane Doe',
    };

    // Example JWT token
    const authToken = 'generated-jwt-token';

    // Setting up the session with Memoraiz
    window.memoraiz.setSession(authToken, user);

    console.log('Memoraiz is ready!');
  }
</script>

API Reference

`window.memoraiz.setSession(authToken, user)`

Configures the user session for Memoraiz.

Parameters

authToken (string): A JWT token representing the user session.
user (object): The user details.
- id (string): A unique identifier for the user.
- displayName (string): The name to display for the user.

`window.memoraiz.mount(frameId, options)`

Mounts a specific Memoraiz frame.

Parameters

frameId (string): The id of the frame to mount (e.g., "learndash").
options (object): Configuration options for the frame.

Example

Here’s an example of embedding the Memoraiz Learndash integration:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Memoraiz Integration</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@memoraiz/frames/dist/style.css"
    />
  </head>
  <body>
    <!-- Your application code goes here -->

    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@memoraiz/frames/dist/index.js"
      defer
      onload="initializeMemoraiz()"
    ></script>
    <script>
      function initializeMemoraiz() {
        console.log('Setting up Memoraiz integration...');

        const user = {
          id: 'user123',
          displayName: 'Jane Doe',
        };

        const authToken = 'generated-jwt-token';

        window.memoraiz.setSession(authToken, user);
        console.log('Memoraiz is ready!');

        // custom learndash frame props
        const learndashProps = {
          // custom heart icon
          triggerIconUrl:
            'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgY2xhc3M9J2x1Y2lkZSBsdWNpZGUtaGVhcnQnPjxwYXRoIGQ9J00xOSAxNGMxLjQ5LTEuNDYgMy0zLjIxIDMtNS41QTUuNSA1LjUgMCAwIDAgMTYuNSAzYy0xLjc2IDAtMyAuNS00LjUgMi0xLjUtMS41LTIuNzQtMi00LjUtMkE1LjUgNS41IDAgMCAwIDIgOC41YzAgMi4zIDEuNSA0LjA1IDMgNS41bDcgN1onLz48L3N2Zz4=',
        };

        const frame = window.memoraiz.mount('learndash', learndashProps);
        console.log('Frame rendered: ', frame);
      }
    </script>
  </body>
</html>