> ## Documentation Index
> Fetch the complete documentation index at: https://developers.partoo.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Tutorial

> Learn how to integrate Partoo into your website using the JavaScript SDK to display embedded views and manage user sessions.

## Introduction

Use the Partoo JavaScript SDK to embed Partoo views into your website via an iframe. The SDK provides utilities to configure, initialize, and control the embedded experience.

<Info>
  The SDK dynamically inserts an iframe and returns a helper instance that you can use to authenticate users and navigate pages.
</Info>

## Environments

Partoo offers two environments:

* **Sandbox**: For development and testing\
  URL: `https://static.sandbox.partoo.co/jssdk/partoo.js`

* **Production**: For live deployment\
  URL: `https://static.partoo.co/jssdk/partoo.js`

# Integration Steps

<Steps>
  <Step title="Import the SDK">
    Include the SDK in your HTML `<head>`:

    ```html theme={null}
    <script src="https://static.partoo.co/jssdk/partoo.js" type="text/javascript"></script>
    ```

    This exposes a global `Partoo` object for use in your scripts.
  </Step>

  <Step title="Generate a Connection Token">
    Before rendering any views, generate a **connection token** for your authenticated user.

    <Info>
      Refer to the authentication [API documentation](/api-reference/connection-tokens/generate-connection-token#generate-connection-token) for details on generating this token.
    </Info>
  </Step>

  <Step title="Insert a Target Container">
    Add a target `<div>` where the Partoo iframe will load:

    ```html theme={null}
    <div id="your-container-id"></div>
    ```

    <Warning>
      Do not use `partoo-iframe` as the container ID—it's reserved internally.
    </Warning>
  </Step>

  <Step title="Initialize and Login">
    Use the SDK to create and display the iframe:

    ```javascript theme={null}
    const connectionToken = 'YOUR_CONNECTION_TOKEN';

    const options = {
      startPage: 'presenceManagement',
      displayIntercom: false,  // Optional: default is true
      displayAddButton: false  // Optional: default is true
    };

    const partooPage = Partoo.init('your-container-id', options);
    partooPage.login(connectionToken);
    ```

    This logs in the user and displays the `startPage`.
  </Step>

  <Step title="Display a Specific Business">
    To load a business edit view directly, pass both `startPage` and `selectedBusinessId`:

    ```javascript theme={null}
    const options = {
      startPage: 'business',
      selectedBusinessId: '62ba00000000000000000000',
      displayIntercom: false,
      displayAddButton: false
    };

    const partooPage = Partoo.init('your-container-id', options);
    partooPage.login(connectionToken);
    ```
  </Step>
</Steps>

# Page Navigation

Use the `partooPage` instance to programmatically navigate:

```javascript theme={null}
partooPage.navigate('businesses'); // Go to the businesses list
partooPage.back();                 // Go back to the previous page
partooPage.forward();              // Go forward to the next page
partooPage.destroy();             // Remove the iframe
```

# Next Steps

Thanks to this quick tutorial, you learned how to display your first Partoo app view thanks to the JS SDK. To build a production ready integration, you might want to check the [Integration Guide](#).
