# View
Use views to switch between human, agent, framework, and implementation-specific versions of the same guidance.
Source: /docs/components/view
Last modified: 2026-06-20
Views are best when the same doc needs human, agent, framework, or implementation-specific variants. Consecutive `View` blocks become one switcher and remember the reader's selected view. Separate switchers with the same titles sync their selected value across the page, matching Mintlify's multi-view behavior.


> **Use views for equivalent paths**
>

  Views should answer the same question for different contexts. If each panel teaches a different topic, use headings or tabs instead.


## Framework views


### HTML

Add `data-plandalf-present` to a button when markup owns the checkout trigger.


### React

Call `plandalf.present()` from an event handler when app state decides what to sell.


````mdx title="view-example.mdx"

### HTML

Add `data-plandalf-present` to a button when markup owns the checkout trigger.


### React

Call `plandalf.present()` from an event handler when app state decides what to sell.

````

## Synced views

When a page has more than one equivalent language or framework section, reuse the same view titles. Choosing a title in one switcher updates the other switcher on the same page.


### JavaScript

Configure the browser SDK once, then call the checkout presenter from the clicked button.


### Python

Keep private API credentials on the server and return the checkout session to the browser.


The next switcher uses the same titles, so it follows the selected language above.


### JavaScript

```js title="open-checkout.js"
await window.Plandalf.openOffer({ offerId: "pro-plan" });
```


### Python

```python title="create_session.py"
session = plandalf.checkout.sessions.create(offer_id="pro-plan")
```


## Human and agent views

Use `for` when content should render for humans or be reserved for exported agent context. Human views show on the site; agent views are omitted from the browser page.


### Agent context

When implementing this page, prefer the browser SDK for checkout presentation and server-side API calls for private credentials.


````mdx title="audience-views.mdx"


### Agent context

Prefer the browser SDK for checkout presentation and server-side API calls for private credentials.

````

## Views with code

When each view needs code, keep the snippets short and equivalent. Use `CodeGroup` instead if the language selector is the primary interaction.


### Button attributes

```html title="button.html"
<button data-plandalf-offer="pro-plan" data-plandalf-mode="modal">
  Buy now
</button>
```


### JavaScript call

```js title="open-offer.js"
await window.Plandalf.openOffer({
  offerId: "pro-plan",
  mode: "modal"
});
```


## Properties


- `title` (string; required):
  Title that identifies this view. Consecutive views with titles become one switcher.


- `icon` (string):
  Icon shown in the view switcher.


- `iconType` (string):
  Icon style metadata for icon libraries that support variants.


## Plandalf extensions


- `for` (humans | agents | human | agent):
  Audience gate. Agent-only views are omitted from the rendered human page.


- `when` (always | human | agent; default: always):
  Alternate audience prop for imported content.


- `class | className` (string):
  Optional utility classes for local spacing or sizing.


## Authoring rules

- Keep consecutive `View` blocks together so the switcher can group them.
- Use the same level of detail in each view.
- Do not hide required human setup inside an agent-only view.
- Use `Tabs` for deliberate reader choice and `View` for alternate forms of the same guidance.

## Related


  - [Visibility](/docs/components/visibility): Hide content by audience.
  - [Tabs](/docs/components/tabs): Use for reader-selected views.
  - [Prompt](/docs/components/prompt): Write copyable agent prompts.