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-blengi-inline></div>

Anywhere in your template, as many times as you like — a WordPress Custom HTML block, a page-builder HTML widget, a theme file. The widget script you already load finds every block and renders a card in it. Nobody needs access to your site for this: the block is the whole integration, and everything about it — copy, layout, colours — is managed from the dashboard afterwards. The snippet with a copy button is on the agent's Overview page. Both attribute names work: data-pitchbar-inline and the white-label data-blengi-inline.

With no attributes and no settings the card shows the segment's persona and greeting and the agent's starter questions — whatever the floating chat would show on that page.

Appearance and copy from the dashboard

Customize → Inline block manages the block without touching the site. Two modes:

Match the floating widget (default) — the block takes the theme's accent, corner radius and launcher icon. Nothing to set; a bare block already looks like the chat.
Customize inline appearance — background, border, text, muted text, title, accent, text on accent, input background and border, chip background, border and text; corner radius, padding, avatar size; shadow on or off.

In both modes you can set the layout (card or bar), how many starter questions show, whether the avatar shows, and the block's title, subtitle and input placeholder. Filled copy fields go through the same translation overrides as the launcher label; empty ones fall back. The live preview on that page renders a real block.

Where the block's content comes from

The block holds nothing itself. On every page load it asks the dashboard with the page URL and the page's own product category, and the dashboard decides — the site only says "render the block here":

Starter questions: the matched segment's questions → automatic page questions for this page → the agent's own questions → live product questions from the page's product data.
Title: the block's data-title → the dashboard's inline title → the segment's persona name → the agent's.
Subtitle: the block's data-subtitle → the dashboard's inline subtitle → the segment's greeting → the generated page line → the agent's welcome message → "Ask anything".
Segment: by URL path first; when no path claims a product page, by the category the page declares in its JSON-LD or breadcrumb, matched against the segment's product categories.

Precedence, lowest to highest: shipped defaults → dashboard settings → the block's own data-* attributes and the site's --pb-inline-* CSS. A web agency that styled the block by hand keeps every override; a customer who never wrote CSS manages everything from the dashboard.

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 with CSS — for agencies

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; a variable you set beats the dashboard's setting for that knob:

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