Getting started

This guide will walk you through two common methods of incorporating Embeddables into your project: installing via npm and including via a script tag.

Option 1: Installation via NPM

If your project uses a module bundler, you can install Embeddables via npm. This method is ideal for modern frontend projects that are built using JavaScript frameworks or libraries.

Steps:

Install the Package

Open your terminal and run:
```
npm install embeddables
```

Import the Components

Once installed, you can import and use the components in your JavaScript files. For example:

import { createEmbeddable, Routes } from 'embeddables';

const embeddable = createEmbeddable({
  container: '#embeddable',
  embedToken: 'embed-token',
  route: Routes.ACCOUNTS,
})

Option 2: Including via a Script Tag

For simple HTML projects or quick prototyping, you can include Embeddables directly via a script tag. This approach does not require a build system and is perfect for straightforward client-side applications.

Steps:

Add the Script Tag

Include the Embeddables library in your HTML file by adding the following <script> tag.
```
<script src="https://cdn.jsdelivr.net/npm/embeddables"></script>
```

Initialize the Components

Once the script loads, the Embeddables components are available globally. You can initialize them in another script block:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embeddables Example</title>
</head>
<body>
  <!-- Your HTML content goes here -->

  <!-- Include the Embeddables library -->
  <script src="https://cdn.jsdelivr.net/npm/embeddables"></script>

  <!-- Initialize a component -->
  <script>
    import { createEmbeddable, Routes } from 'embeddables';

    const embeddable = createEmbeddable({
      container: '#embeddable',
      embedToken: 'embed-token',
      route: Routes.ACCOUNTS,
    })
  </script>
</body>
</html>