Skip to content

Update topbar method for full screen in sdk and web component docs #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DeolaJ merged 1 commit into from
May 4, 2026
+14 −2
Merged

Update topbar method for full screen in sdk and web component docs #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion docs/journeys/sdk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ All configuration methods are chainable and return the `Embedding` instance. Cal
| Method | Type | Default | Description |
| ------------------------------ | ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.mode(value)` | `"inline"` \| `"full-screen"` | `"inline"` | The display mode. `"inline"` renders within the page flow. `"full-screen"` renders as an overlay. |
| `.topBar(value)` | `boolean` | `true` | Whether to show the top navigation bar. |
| `.topBar(value)` | `boolean` | `true` | Whether to show the top navigation bar. Only applies to `inline` mode — in `full-screen` mode the top bar is always visible and cannot be hidden. |
| `.scrollToTop(value)` | `boolean` | `true` | Whether to scroll to the top of the Journey on step navigation. |
| `.closeButton(value)` | `boolean` | `true` | Whether to show the close button in the top bar. |
| `.lang(value)` | `"de"` \| `"en"` \| `"fr"` | - | **Deprecated. Will be removed in a future version.** Overrides the Journey UI language. Set the language in the Journey Builder instead. |
Expand Down Expand Up @@ -228,6 +228,12 @@ Renders the Journey directly within the page at the position of `#embed-target`:

In full-screen mode the Journey is hidden by default. Call `.isFullScreenEntered(true)` on the `Embedding` instance to open it, typically from a button click:

:::note Top bar in full-screen

The top bar is always visible in full-screen mode and cannot be hidden. `.topBar(false)` is ignored when `mode` is `"full-screen"`. The close button inside the top bar can still be toggled with `.closeButton(value)`.

:::

```html title="Full-screen with a button"
<button id="open-btn">Open Journey</button>
<div id="embed-target"></div>
Expand Down
8 changes: 7 additions & 1 deletion docs/journeys/web-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ All attributes are set as standard HTML attributes on the `<epilot-journey>` ele
| `journey-id` | `string` | — | **Required.** The ID of the Journey to render. |
| `mode` | `"inline"` \| `"full-screen"` | `"full-screen"` | The display mode. `inline` renders the Journey within the page flow. `full-screen` renders it as an overlay. |
| `lang` | `"de"` \| `"en"` \| `"fr"` | `"de"` | Overrides the UI language. This affects UI labels and copy, but does not automatically translate static content configured in the Journey Builder. |
| `top-bar` | `"true"` \| `"false"` | `"true"` | Whether to show the top navigation bar. |
| `top-bar` | `"true"` \| `"false"` | `"true"` | Whether to show the top navigation bar. Only applies in `inline` mode — in `full-screen` mode the top bar is always visible and cannot be hidden. |
| `scroll-to-top` | `"true"` \| `"false"` | `"true"` | Whether to scroll the page to the top of the Journey when the user navigates to a new step. |
| `close-button` | `"true"` \| `"false"` | `"true"` | Whether to show the close button in the top bar. |
| `context-data` | JSON string | — | Additional contextual data passed to the Journey and included with the submission. Must be a JSON-encoded string of key-value pairs. See [Context Data](#context-data). |
Expand Down Expand Up @@ -105,6 +105,12 @@ Render the Journey directly within the page flow:

In full-screen mode, the Journey is hidden by default. Use the `is-full-screen-entered` attribute to control its visibility:

:::note Top bar in full-screen

The top bar is always visible in full-screen mode and cannot be hidden. The `top-bar` attribute is ignored when `mode` is `"full-screen"`. The close button inside the top bar can still be toggled with the `close-button` attribute.

:::

```html title="Full-screen mode"
<epilot-journey
journey-id="<your-journey-id>"
Expand Down
Loading