npm package: @memoraiz/frames
Description: 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.
Author: MemorAIz
Latest version: 0.0.8

# @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:

```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

```html
<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:

```html
<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:

```html
<!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>
```

---

## Support

For issues, suggestions, or contributions, please reach out via [GitHub Issues](https://github.com/memoraiz-ai) or contact us at hello@memoraiz.com.