# Advanced Components

Advanced components are escape hatches: custom code, page-injected styling, and session-variable management. Reach for them when standard blocks can't do what you need — and treat them as the most expensive option to maintain.

{% hint style="warning" %}
Custom code runs in your users' browsers. Test changes in a copy of the workflow before publishing, and keep scripts short — long custom logic in a docs-managed string is fragile.
{% endhint %}

## Components in this category

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>HTML</strong></td><td>Embed custom HTML — videos, third-party widgets, formatted snippets.</td><td><a href="/pages/eJIk54iTsfwxsVYk4YAF">/pages/eJIk54iTsfwxsVYk4YAF</a></td></tr><tr><td><strong>JavaScript</strong></td><td>Run custom JavaScript on a page — at load, before/after submit, on item scan, or as a custom action.</td><td><a href="/pages/DEHisLtYVyC4YEOvJrO0">/pages/DEHisLtYVyC4YEOvJrO0</a></td></tr><tr><td><strong>CSS</strong></td><td>Inject custom CSS rules into a page — animations, overrides, embedded-content styling.</td><td><a href="/pages/LXJAsk3WqG8zH44UmBR0">/pages/LXJAsk3WqG8zH44UmBR0</a></td></tr><tr><td><strong>Variables</strong></td><td>Edit session variables on a page — drives behaviour for other blocks.</td><td><a href="/pages/2ToYy14LbRDeVch9XRjC">/pages/2ToYy14LbRDeVch9XRjC</a></td></tr></tbody></table>

## When you'd reach for this category

* **Embedding outside content** (video, map, widget) → HTML.
* **Glue logic between blocks** or pre/post-submit hooks → JavaScript.
* **Page-level styling** beyond the theme builder → CSS.
* **Letting the user pick a context value** (currency, price level, location override) → Variables.

If you find yourself reaching here often, ask whether the pattern deserves a real component — flag it to your implementation team.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Module Variables</strong></td><td>The full guide to session variables — scopes, sources, and consumers.</td><td><a href="/pages/S9QlmvCWJ8AOsDrFpQtz">/pages/S9QlmvCWJ8AOsDrFpQtz</a></td></tr><tr><td><strong>Styling</strong></td><td>Where component-level styling and the theme builder fit in the bigger picture.</td><td><a href="/pages/tjJaLLImhhKrpHUhLKny">/pages/tjJaLLImhhKrpHUhLKny</a></td></tr><tr><td><strong>Best Practices</strong></td><td>Production checklist before publishing custom code.</td><td><a href="/pages/vAbsWdSLiwdLsG7BZSoq">/pages/vAbsWdSLiwdLsG7BZSoq</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/advanced-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.