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

# Embeddable Widget

> Trip planning content embedded into your existing website.

## Overview

The Embeddable Widget is a JavaScript component that adds destination content to your existing website so travellers can plan without leaving your domain.

<Info>
  Integration level: Low integration. The widget is installed with a script in your page header and a dynamic content snippet where you want it to render.
</Info>

## Setup flow

<Steps>
  <Step title="Add the widget script to the page header">Obvlo provides a code snippet to load the widget engine.</Step>
  <Step title="Add the dynamic content snippet">Place the HTML block where the widget should appear on the page.</Step>
  <Step title="Configure layout and behaviour in Portal">Set card order, styles, filters, and interaction settings.</Step>
  <Step title="Run design and device checks">Confirm branding, content quality, and responsive behaviour before launch.</Step>
</Steps>

## Key capabilities

<CardGroup cols={2}>
  <Card title="Widget configuration" icon="sliders">
    Configure layout, styling, and behaviour using embed attributes or Portal controls.
  </Card>

  <Card title="Main page cards" icon="square">
    Build the homepage from Header Banner, Menu, Grid, and List-Map cards.
  </Card>

  <Card title="Search and map" icon="map">
    Support listing discovery with free-text search, marker clusters, and co-location handling.
  </Card>

  <Card title="Personalisation" icon="sparkles">
    Ask preference questions and re-rank recommendations based on traveller responses.
  </Card>

  <Card title="Drawer mode" icon="sidebar">
    Launch as a side button that expands into a full widget overlay.
  </Card>

  <Card title="Insights" icon="line-chart">
    Send interaction events into Google Analytics and related reporting workflows.
  </Card>
</CardGroup>

## Integration options

<Tabs>
  <Tab title="Display mode">
    Use full, nearby, or hidden mode based on your page goals. Hidden mode keeps data flows active without visible UI.
  </Tab>

  <Tab title="Branding">
    Match widget colours, fonts, and card styles to your website. Theme options include light and dark.
  </Tab>

  <Tab title="Analytics">
    Track click-through, filters, and sorting behaviour to understand what guests use most.
  </Tab>
</Tabs>

## Related

* [Portal](/product/management/portal)
* [Reports](/product/insights/reports)
* Other delivery options: [Web App](/product/delivery/web-app), [Microsite](/product/delivery/microsite), [API](/product/delivery/api), [Partner Integrations](/product/delivery/partner-integrations)