@memoraiz/frames
Version:
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.
144 lines (104 loc) • 3.76 kB
Markdown
# @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
<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.