> ## Documentation Index
> Fetch the complete documentation index at: https://docs.threetone.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer

> Plan a Framer embed with a suitable layout, permitted hosting origin, and explicit checks before a Threetone widget release.

Use Framer's Embed component to plan where an agent interface would sit. A Threetone production embed and supported session path still need to be released before this becomes a working installation.

## Prepare the component

Framer's [embed guide](https://www.framer.com/help/articles/how-to-add-an-iframe-or-embed-script/) supports a URL or HTML containing an embed script. From **Insert**, search for **Embed** and place the component on the canvas. Set aside a suitable test page without adding an unverified Threetone URL.

<Steps>
  <Step title="Design the space">
    Give the interface enough width and height for its expanded state, errors, and controls. Review each breakpoint. Avoid placing it where it obscures navigation or the page's primary action.
  </Step>

  <Step title="Check the integration contract">
    When a widget is released, confirm whether it supports Framer's Embed context and whether it expects a URL or a script. Review allowed origins, frame restrictions, session access, and microphone permissions if voice is supported. A host that disallows framing cannot be made embeddable by changing a Framer layout setting.
  </Step>

  <Step title="Validate the published site">
    Add only the verified integration on the test page, then inspect the published domain. Test keyboard entry and exit, mobile sizing, navigation, permission denial, and ending a session. Preview rendering alone is not proof of a working conversation.
  </Step>
</Steps>

## Before wider placement

Confirm there is one interface per intended page, no credentials in public code, and no persistent audio after leaving the page. Keep a contact link outside the embed so visitors have an alternative if it cannot load. Retain the prior page version for rollback.

Review [widget preparation](/agents-platform/deploy/web/widget) for release evidence and [authentication](/agents-platform/configure/authentication/overview) for agent access.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Why does an HTTPS URL still show a blank frame?" id="framer-faq-frame">The destination may forbid framing, or the integration may need a different installation mechanism. Verify the released widget contract and browser error before changing site policy.</Accordion>
  <Accordion title="Can I add a workspace API key to the HTML field?" id="framer-faq-key">No. Public embed code is visible to visitors. Use only the session-access mechanism documented for the released widget.</Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.