Embed the widget

Inline embed in your pages

Besides the floating launcher, the same agent can sit inside your pages — between the products on a category page, next to the product details on a product page. The inline block runs no chat of its own: a chip click, or a typed question and Enter, opens the floating chat with that question already asked. One agent, one session, one transcript, and the page context goes along.

Place it

<div data-pitchbar-inline></div>

Anywhere in your template, as many times as you like. The widget script you already load finds every block and renders a card in it. With no attributes the card shows the segment's persona and greeting and the agent's starter questions — whatever the floating chat would show on that page.

One agent, a different role per place

Do not create an agent per category. Create a segment per place, matched by URL pattern, and give it its own persona name, greeting, starter questions and instructions:

Segment	URL pattern	Role
Thermosokken	`/thermosokken*`	Advisor within that category: "Niet zeker welke thermosok?"
Product pages	`/product/*`	Product specialist — the widget also reads the product's JSON-LD, so no segment per product is needed
Default	everything else	General shopping assistant

The segment drives both the inline block and the floating chat on that page, and its instructions are appended to the agent's prompt for that conversation.

Per-block options

All optional. Anything absent falls back to the segment and the agent.

Attribute	What it does
`data-title`	Heading. Default: the persona name.
`data-subtitle`	Line under the heading. Default: the segment greeting.
`data-placeholder`	Input placeholder. Default: "Ask a question…" (translated).
`data-prompts`	This block's starter questions, pipe-separated: `Help mij kiezen\|Koude & klamme voeten?`. Default: the agent's.
`data-max-prompts`	How many to show, 1–6. Default 3.
`data-avatar`	Image URL for the avatar. Default: the launcher icon.
`data-hide-avatar`	Present = no avatar.
`data-layout`	`card` (default, stacked) or `bar` (one row on desktop, stacks under 640px).
`data-context`	Explicit placement context, see below.

Styling — make it native to your theme

The block lives in its own shadow root so your CSS cannot break it, but it is themed entirely through CSS custom properties, which inherit into the shadow root. Set them on the block itself or on any ancestor:

[data-pitchbar-inline] {
  --pb-inline-bg: #f1f8f3;
  --pb-inline-border: 1px solid #cfe6d6;
  --pb-inline-radius: 14px;
  --pb-inline-padding: 18px;
  --pb-inline-font: "Inter", sans-serif;
  --pb-inline-title: #0b3d1f;
  --pb-inline-text: #1a1a1a;
  --pb-inline-muted: #4b5f52;
  --pb-inline-accent: #1e8a4c;       /* send button, initial, focus ring */
  --pb-inline-accent-ink: #fff;      /* text on the accent */
  --pb-inline-chip-bg: #fff;
  --pb-inline-chip-border: 1px solid #cfe6d6;
  --pb-inline-chip-color: #0b3d1f;
  --pb-inline-input-bg: #fff;
  --pb-inline-input-border: 1px solid #cfe6d6;
  --pb-inline-shadow: none;
}

The full list:

Variable	Default
`--pb-inline-bg`	#fff
`--pb-inline-border`	1px solid #e6e8ee
`--pb-inline-radius`	16px
`--pb-inline-padding`	16px
`--pb-inline-gap`	10px — between header, input and chips
`--pb-inline-max-width`	560px (card), 100% (bar)
`--pb-inline-shadow`	soft
`--pb-inline-font`	system-ui stack
`--pb-inline-title`, `--pb-inline-title-size`, `--pb-inline-title-weight`	text colour, 15px, 700
`--pb-inline-subtitle-size`	12.5px
`--pb-inline-text`, `--pb-inline-muted`	#131720, #6a7280
`--pb-inline-accent`, `--pb-inline-accent-ink`	the agent's accent, #fff
`--pb-inline-avatar-size`	36px
`--pb-inline-input-bg`, `--pb-inline-input-border`, `--pb-inline-input-radius`, `--pb-inline-input-size`	#fff, 1px solid #e6e8ee, 999px, 13.5px
`--pb-inline-chip-bg`, `--pb-inline-chip-border`, `--pb-inline-chip-color`, `--pb-inline-chip-radius`, `--pb-inline-chip-size`, `--pb-inline-chip-gap`	#f7f8fa, 1px solid #e6e8ee, text colour, 999px, 12.5px, 6px
`--pb-inline-chip-hover-bg`, `--pb-inline-chip-hover-color`	12% accent tint, text colour

Anything else: `::part()`

Every piece is exposed as a shadow part, so ordinary theme CSS can restyle it completely — fonts, transforms, pseudo-elements, media queries, anything:

[data-pitchbar-inline]::part(chip) { text-transform: uppercase; letter-spacing: .02em; }
[data-pitchbar-inline]::part(title) { font-family: "Fraunces", serif; }
[data-pitchbar-inline]::part(button) { border-radius: 8px; }
@media (max-width: 640px) {
  [data-pitchbar-inline]::part(chips) { display: none; }
}

Parts: card, header, avatar, title, subtitle, form, input, button, chips, chip.

Passing context

Automatic. Every turn already carries the page URL, title, meta tags, JSON-LD, headings and visible text, so category and product context arrive without you doing anything. On a product page the agent is told which product is open.

Explicit, per block. data-context says where on the site the question was asked from, in the terse key: value; key: value form or as a JSON object. It rides along with the first message that block sends and reaches the agent as "Asked from: category: Thermosokken" — deliberately a fact about the place, never an instruction.

<div data-pitchbar-inline
     data-context="type: category; category: Thermosokken"></div>

<div data-pitchbar-inline
     data-context='{"type":"product","sku":"STP-BOSTON-ZW","name":"STAPP Boston Thermo — Zwart"}'></div>

Up to 10 keys, 120 characters each. For page-wide CMS context (post type, taxonomies, product fields on every turn) use data-page-context on the script tag instead — see WordPress & page builders.

A category-page example

<div class="advice-block"
     data-pitchbar-inline
     data-layout="bar"
     data-title="Niet zeker welke thermosok?"
     data-subtitle="Stel je vraag of kies hieronder — ik denk met je mee."
     data-placeholder="Bijv. welke sok bij koude, klamme voeten?"
     data-prompts="Koude & klamme voeten?|Help mij kiezen"
     data-context="type: category; category: Thermosokken"></div>

<style>
.advice-block {
  --pb-inline-bg: #eef7f0; --pb-inline-border: 1px solid #cde5d3;
  --pb-inline-radius: 14px; --pb-inline-accent: #1e8a4c;
  --pb-inline-title: #0b3d1f; --pb-inline-chip-bg: #fff;
  --pb-inline-chip-border: 1px solid #cde5d3; --pb-inline-shadow: none;
}
</style>

Click "Koude & klamme voeten?" and the floating chat opens bottom-right with that question asked, the category named, and the conversation continues there.