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

# Embedded forms

> Integrate third-party forms and scheduling tools directly into your demos

<Icon icon="code" /> **Embedded forms** allow you to integrate your existing forms and scheduling tools directly into demo steps. While Navattic forms are recommended for the best user experience, embedded forms let you maintain existing workflows and integrations.

## Why use embedded forms?

Embedded forms are ideal when you need to:

* **Maintain existing workflows**: Keep using forms already integrated with your systems
* **Complex logic**: Leverage advanced form logic from specialized platforms
* **Compliance requirements**: Use forms that meet specific regulatory needs

<Tip>
  Navattic forms are recommended for better performance, analytics, and user experience. Consider embedded forms only when specific requirements can't be met with native forms.
</Tip>

## Supported embed form types

<CardGroup columns={2}>
  <Card
    title="HubSpot"
    icon={
<img
  src="/images/hubspot.svg"
  className="my-0 h-6 w-6"
/>
}
    horizontal
  />

  <Card
    title="Marketo"
    icon={
<img
  src="/images/integrations/marketo.png"
  className="my-0 h-6 w-6"
/>
}
    horizontal
  />

  <Card
    title="Pardot"
    icon={
<img
  src="https://logo.navattic.com/pardot.com"
  className="my-0 h-6 w-6"
/>
}
    horizontal
  />

  <Card
    title="Calendly"
    icon={
<img
  src="/images/integrations/calendly.svg"
  className="my-0 h-6 w-6"
/>
}
    horizontal
  />

  <Card
    title="Chili Piper"
    icon={
<img
  src="/images/integrations/chilipiper.jpg"
  className="my-0 h-6 w-6"
/>
}
    horizontal
  />

  <Card
    title="RevenueHero"
    icon={
<img src="/images/integrations/revenuehero.jpg" className="my-0 h-6 w-6" />
}
    horizontal
  />

  <Card
    title="HubSpot Meeting"
    icon={
<img
  src="/images/hubspot.svg"
  className="my-0 h-6 w-6"
/>
}
    horizontal
  />

  <Card
    title="Default.com"
    icon={
<img src="/images/integrations/default.jpg" className="my-0 h-6 w-6" />
}
    horizontal
  />
</CardGroup>

## Adding embedded forms

Follow these steps to add an embedded form to your demo:

<Steps>
  <Step title="Add an embed step">
    1. In the Flow Builder, add a new step
    2. Select **Embed** as the step type
    3. Choose your embed type from the dropdown
  </Step>

  <Step title="Configure the embed">
    Each embed type requires specific configuration:

    <Tabs>
      <Tab title="HubSpot">
        **Required fields:**

        * **Portal ID**: Your HubSpot account ID
        * **Form ID**: The specific form's ID
        * **Region**: Your HubSpot data center (na1 or eu1)

        ```yaml theme={null}
        Portal ID: 123456
        Form ID: a1b2c3d4-e5f6-g7h8-i9j0-k1l2m3n4o5p6
        Region: na1
        ```

        **Finding your IDs:**

        1. Go to Marketing > Forms in HubSpot
        2. Click on your form
        3. The URL contains both IDs: `app.hubspot.com/forms/[PORTAL_ID]/editor/[FORM_ID]`
      </Tab>

      <Tab title="Marketo">
        **Required fields:**

        * **Munchkin ID**: Your Marketo account identifier
        * **Form ID**: The specific form number

        ```yaml theme={null}
        Munchkin ID: 137-MKP-579
        Form ID: 1018
        ```

        **Finding your IDs:**

        1. Go to Design Studio in Marketo
        2. Find your form
        3. The URL shows: `app-ab12.marketo.com/#FO1018A1`
        4. Munchkin ID is in Admin > Integration > Munchkin
      </Tab>

      <Tab title="Pardot">
        **Form ID or embed URL (required):**

        Paste the full form URL from your Pardot embed code, or enter a numeric Form ID.

        * **Full URL** — Recommended. Works with standard and custom tracker domains (e.g., `https://go.pardot.com/l/...` or `https://learn.yourcompany.com/l/...`). Paste the URL exactly as it appears in your Pardot embed code.
        * **Numeric Form ID** — Go to Marketing > Forms in your Pardot (Account Engagement) account. Click your form — the ID appears in the URL (e.g., `/content/form/123456/`).

        **Business Unit ID (optional):**

        Only needed when using a numeric Form ID. Leave blank if you pasted a full URL. Find it in Salesforce Setup > Pardot Account Setup. It begins with "0Uv" and is 18 characters long.
      </Tab>

      <Tab title="Calendly">
        **Required fields:**

        * **Calendly URL**: Your scheduling link
        * **Hide details**: Show/hide event details
        * **Hide cookies**: Show/hide cookie banner

        ```yaml theme={null}
        URL: https://calendly.com/yourname/30min
        Hide details: false
        Hide cookies: true
        ```

        **Best practices:**

        * Use specific event types for demos
        * Configure buffer times between meetings
        * Set up reminder emails
      </Tab>

      <Tab title="Chili Piper">
        **Required fields:**

        * **Router URL**: Your Chili Piper router link
        * **Meeting type**: Inbound router or specific queue

        ```yaml theme={null}
        Router URL: https://yourcompany.chilipiper.com/router/inbound
        ```

        **Configuration tips:**

        * Set up routing rules before embedding
        * Test queue assignments
        * Configure rep availability
      </Tab>

      <Tab title="RevenueHero">
        **Required fields:**

        * **Widget ID**: Your RevenueHero widget identifier
        * **Router settings**: Lead qualification rules

        ```yaml theme={null}
        Widget ID: rh_widget_abc123
        ```

        **Setup requirements:**

        * Configure qualification rules
        * Set up rep calendars
        * Define routing logic
      </Tab>

      <Tab title="HubSpot Meeting">
        **Required fields:**

        * **Meeting link**: Your HubSpot scheduling page
        * **Meeting type**: Specific meeting duration/type

        ```yaml theme={null}
        Meeting URL: https://meetings.hubspot.com/yourname/demo-call
        ```

        **Preparation:**

        * Set up meeting types in HubSpot
        * Configure availability
        * Add meeting descriptions
      </Tab>

      <Tab title="Default.com">
        **Required fields:**

        * **Embed URL**: The iframe-compatible URL
        * **Height**: Frame height in pixels
        * **Additional parameters**: Query strings or settings

        ```yaml theme={null}
        URL: https://forms.example.com/demo-request
        Height: 600
        ```

        **Compatibility notes:**

        * Must allow iframe embedding
        * Should be mobile-responsive
        * Test cross-origin policies
      </Tab>
    </Tabs>
  </Step>
</Steps>

#### FAQ

<AccordionGroup>
  <Accordion title="Styling conflicts">
    **Issue:** Embedded form doesn't match demo design

    Embedded forms load inside an iframe served by the form provider (HubSpot, Pardot, Calendly, etc.). Because of this, styling changes cannot be made from within Navattic — all appearance customization must be done directly in the source platform.

    **Solutions:**

    * **Use the form provider's own styling tools** — Each platform (HubSpot, Pardot, Marketo, etc.) has its own form styling options. Apply branding, colors, and fonts there so the form looks consistent before it's embedded.
    * **Consider using Navattic forms** — If you need the form to match your demo's design closely, [Navattic native forms](/tracking/forms) give you full control over appearance within the platform.
  </Accordion>
</AccordionGroup>