Plandalf

View

Use views to switch between human, agent, framework, and implementation-specific versions of the same guidance.

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

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

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

<View title="HTML" icon="code">
  Add `data-plandalf-present` to a button when markup owns the checkout trigger.
</View>
<View title="React" icon="code">
  Call `plandalf.present()` from an event handler when app state decides what to sell.
</View>

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.

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

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.

await window.Plandalf.openOffer({ offerId: "pro-plan" });
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.

Start with one visible buying action, one test offer, and one completed checkout before adding webhooks.

<View title="Human checklist" icon="user" for="humans">
  Start with one visible buying action, one test offer, and one completed checkout.
</View>

<View title="Agent context" icon="sparkles" for="agents">
  Prefer the browser SDK for checkout presentation and server-side API calls for private credentials.
</View>

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 data-plandalf-offer="pro-plan" data-plandalf-mode="modal">
  Buy now
</button>
await window.Plandalf.openOffer({
  offerId: "pro-plan",
  mode: "modal"
});

Properties

titlestringrequired

Title that identifies this view. Consecutive views with titles become one switcher.

iconstring

Icon shown in the view switcher.

iconTypestring

Icon style metadata for icon libraries that support variants.

Plandalf extensions

forhumans | agents | human | agent

Audience gate. Agent-only views are omitted from the rendered human page.

whenalways | human | agentdefault: always

Alternate audience prop for imported content.

class | classNamestring

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.
Visibility Hide content by audience.
Tabs Use for reader-selected views.
Prompt Write copyable agent prompts.

Feature detail