Popover.Popover Block

Display content in a floating popover.

Minimal usage

# 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

# 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 on https://www.acme.com :

Add “https://www.acme.com” to CORS_ADDITIONAL_ALLOWED_ORIGINS then ad the following script in the page served on acme.com:

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