> ## Documentation Index
> Fetch the complete documentation index at: https://prismeai-legacy.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover.Popover Block

> Display content in a floating popover.

## Minimal usage

```yaml theme={null}
# Page/Block
- slug: Popover.Popover
  url: /form
  config:
    button:
      bgColor: '#4a6cf7'
      icon: https://example.com/button-icon.svg
      position:
        right: 20px
        bottom: 20px
```

This block displays a floating popover that loads a page URL in an overlay triggered by a button. It is useful for embedding help centers, forms, or contextual content without navigating away.

## Advanced usage

### With header, tooltip and animation

```yaml theme={null}
# Page/Block
- slug: Popover.Popover
  urlFrom: 0
  url: /form
  config:
    header:
      title: Help Center
      subtitle: Get assistance with your questions
      bgColor: '#4a6cf7'
      icon: https://example.com/icon.svg
    button:
      bgColor: '#4a6cf7'
      icon: https://example.com/button-icon.svg
      position:
        right: 20px
        bottom: 20px
      size:
        width: '120'
        height: '30'
    tooltip:
      text: 'Need help?'
      openDelay: 500
    container:
      animation: opacity
      opened: false
  onInit: myInitPopover
  updateOn: updatePopover
  auth: https://api.prisme.ai/v2/me
```

### Configuration reference

| Property                        | Type    | Description                           |
| ------------------------------- | ------- | ------------------------------------- |
| `url`                           | string  | URL path to load in the popover       |
| `urlFrom`                       | number  | URL starting index                    |
| `config.header.title`           | string  | Popover title                         |
| `config.header.subtitle`        | string  | Popover subtitle                      |
| `config.header.bgColor`         | string  | Header background color               |
| `config.header.icon`            | string  | URL to header icon                    |
| `config.button.bgColor`         | string  | Button background color               |
| `config.button.icon`            | string  | URL to button icon                    |
| `config.button.position.right`  | string  | Distance from right edge              |
| `config.button.position.top`    | string  | Distance from top edge                |
| `config.button.position.left`   | string  | Distance from left edge               |
| `config.button.position.bottom` | string  | Distance from bottom edge             |
| `config.button.size.width`      | string  | Button width                          |
| `config.button.size.height`     | string  | Button height                         |
| `config.tooltip.text`           | string  | Tooltip text                          |
| `config.tooltip.openDelay`      | number  | Delay before showing tooltip (ms)     |
| `config.container.animation`    | string  | Animation type                        |
| `config.container.opened`       | boolean | Whether the popover is initially open |

`auth` parameter is very specific for usage with an authenticated content with a SSO when using Popover as a script tag.
For security reasons, the authentication must be done in a trust domain context.
In the use case where a tierce domain wants to popover a page from Prisme.ai
needing an authentication with a SSO, it will need to set the `auth` parameter with
the /me endpoint. Thge popover will first check user auth before loading iframe and
if user is not authenticated, it will follow the auth process in the main window
making possible to store the http secure cookies.\
The main host will need autorisation to fetch Prisme.ai API, so you will have to
update the `CORS_ADDITIONAL_ALLOWED_ORIGINS` environment variable to add its domain.

Exemple to display [AI Store agent](https://studio.prisme.ai/en/product/ai-knowledge-chat/agent?id=66cde46fbf94ca779ff6d7b8) on [https://www.acme.com](https://www.acme.com) :

Add "[https://www.acme.com](https://www.acme.com)" to `CORS_ADDITIONAL_ALLOWED_ORIGINS` then ad the following script in the page served on acme.com:

```html theme={null}
<script>
  Prismeai.popover({
    url: `https://studio.prisme.ai/en/product/ai-knowledge-chat/agent?id=66cde46fbf94ca779ff6d7b8`,
    auth: 'https://api.sandbox.prisme.ai/v2/me',
  });
</script>
```