> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/content-editing/components/advanced-components.md). # Advanced components These components embed blocks, forms, scripts and personalised content. Authors can add most of them, but they depend on set-up elsewhere — a block, a webform, a Recombee account — so use them with your site builder. **iFrame** and **Snippet** (and **Hero**) are restricted to Site administrators and do not appear in an Author's **Component type** list. ## Decision Flow Guides visitors through a series of questions to an answer. See a decision flow on the demo site: ![A decision flow](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-3eec4a33b7a048e40fab7f098896efabd0cf86b5%2Fc-decision-flow.png?alt=media) 1. Build the flow with the online tool at and copy the HTML it produces. 2. Add a **Decision Flow** component. 3. In the **Decision flow** field click **Source** and paste the HTML. ![The decision flow form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-e3e0e6053685b1a6b48991400403bd5184a461cd%2Ff-decision-flow.png?alt=media) ## Embedded Block Embeds a block provided by a module — a menu, a search box, breadcrumbs. See an embedded block on the demo site: ![An embedded block](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-65a1ffe60d3f23a0397f8c87f66832d6566a743d%2Fc-embedded-block.png?alt=media) 1. Find the block's machine name: open *Manage → Structure → Block layout* (`/admin/structure/block`), click **Place block** and locate the block. Any block whose category is not *Custom* comes from a module. Place it, click **Configure**, copy the machine name from the URL (e.g. `system_breadcrumb_block`), then cancel without saving. 2. Add an **Embedded Block** component and paste the machine name into **Plugin block definition**. ![The embedded block form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-72d7a3001aa5a6bd7fbf447afa0224d482564306%2Ff-embedded-block.png?alt=media) ## Embedded Custom Block Embeds a block from the custom block library. See an embedded custom block on the demo site: ![An embedded custom block](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-ce91c882fa5e39a0f2eb60f605e57b76086c6231%2Fc-embedded-custom-block.png?alt=media) 1. Open the custom block library (`/admin/content/block`), edit the block and read its ID from the URL — `/admin/content/block/6` is ID `6`. 2. Add an **Embedded Custom Block** component and enter the ID in **Content block definition**. To show a step-by-step list of pages, embed a Sequence block — see [Sequence](/convivial-for-govcms/site-structure/blocks.md#sequence). ![The embedded custom block form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-5f39947a482312531f96bdb1229441543f138b57%2Ff-embedded-custom-block.png?alt=media) ## Embedded View Embeds a view — a dynamic listing built by a Site administrator. Enter the view's machine name, display and arguments in **View definition**, e.g. `articles block 56,57`. ## Embedded Webform Embeds a form built by a Webform manager. Choose it under **Webform**; available forms are listed at `/admin/webform`. See an embedded webform on the demo site: ![An embedded webform](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f3e4aaf3afe021b6cbe38988240f4819301f240a%2Fc-embedded-webform.png?alt=media) ![The embedded webform form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-9f22da25ce81d89f206983cfc0bdedd6a8147e4a%2Ff-embedded-webform.png?alt=media) ## iFrame Embeds a page from another system in a frame — dashboards, visualisations, booking tools. See an iFrame on the demo site: ![An iframe](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-236029ac9aaccd9550ae772afd8e8d8dcc6d3e2b%2Fc-iframe.png?alt=media) 1. Add an **iFrame** component. 2. Enter the **URL**, a **Height** in pixels, and an **iFrame title** describing the content for assistive technology. 3. Tick **Allow full screen** to add a full-screen button. Check that the source site allows embedding; many do not. ![The iframe form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-898053531fe32d0089a68df5ccc0e5b7b69c0a80%2Ff-iframe.png?alt=media) ## Personified Data Fetches JSON from an endpoint using values from the visitor's context and renders it with a template — a personalised feed of content. The component gathers context from the query string, cookies, local storage, the data layer or window variables; builds the endpoint URL from those parameters; fetches the JSON; transforms it with the chosen template; and inserts the result into the page. 1. Add a **Personified Data** component. 2. Enter the **Endpoint** URL. 3. Under **Parameters** add a **Parameter** for each value the endpoint needs: its **Source type** (*Querystring*, *Cookie*, *Local storage*, *Data layer*, *Window*, *Constant*), **Source key**, **Endpoint key** and **Default value**. 4. Choose a **Template** (*Item basic card*, *Item image card*, *Item summary*, *Item teaser*, *Promotion hero*, *Promotion plain*). 5. Fill in **No script** with content for visitors without JavaScript. ## Personified Content Renders a template against the visitor's context — cookies and local storage — without fetching data. Use it for a greeting or a message that varies by audience. See personified content on the demo site: 1. Add a **Personified Content** component. 2. Write the template in **Personified content**, using the context variables. 3. Fill in **No script** with the fallback content. ## Recombee Scenario Shows content recommendations from the Recombee recommendation engine, based on the visitor's behaviour and interests. See recommendations on the demo site: ![Recommendations](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f75f0f0c2de9889abb97f23c145d6d4eb94e6517%2Fc-recommendations.png?alt=media) Before it can be used, a developer must set Recombee up: model the content types, publish a JSON feed for Recombee to ingest, define the schema, scenarios and catalog in Recombee, set the client and item IDs in the site's metadata, enable tracking, and road-test the scenarios. 1. Add a **Recombee Scenario** component. 2. Enter the connection details from the Recombee settings page: **Database** (the API identifier), **Public token**, **Region**, and whether to **Use HTTPS**. 3. Enter the **Scenario** name and its **Type** (*items-to-user* for recommendations to the visitor, *items-to-item* for recommendations related to the current page). 4. Set **Page size** — the number of items — and choose a **Template**. ![The Recombee scenario form](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-c76f22d03a35935da3fc34bd7d791734dbb1a44a%2Ff-recommendations.png?alt=media) ## Recombee Search Shows personalised search results from Recombee for a query, ranked by the visitor's preferences. Set-up is the same as for Recombee Scenario, plus **Allowed domains** and **Allowed roles** for the tracking script and **Enable portion tracking** to record what visitors search for. ## Snippet Embeds a JavaScript snippet. Enter the code in **Snippet** without the surrounding `