Embedding Options

Three ways to add your SupportRetriever form to any project: direct URL, iframe, or HTML link.

Getting Embed Codes

When you call GET /api/agent/form, you receive all embed options:

{
  "embed": {
    "direct_url": "https://supportretriever.com/form/uuid",
    "iframe": "<iframe src=\"...\" width=\"100%\" height=\"600\" frameborder=\"0\" style=\"border: none;\"></iframe>",
    "html_link": {
      "default": "<a href=\"...\" class=\"support-btn\">Contact Support</a>",
      "with_styles": "<a href=\"...\" style=\"display:inline-block;padding:12px 24px;background:var(--color-primary);color: var(--color-on-primary);text-decoration:none;border-radius:6px;font-family:sans-serif;\">Contact Support</a>"
    }
  }
}

Option 1: Direct URL

Use Case: Links, redirects, sharing

Format:

https://supportretriever.com/form/[form-id]

Example Usage:

<!-- Simple link -->
<a href="https://supportretriever.com/form/abc123">Contact Us</a>

<!-- Button -->
<button onclick="window.location.href='https://supportretriever.com/form/abc123'">
  Get Support
</button>

<!-- Redirect -->
<meta http-equiv="refresh" content="0; url=https://supportretriever.com/form/abc123">

Pros:

• Simplest option
• Works everywhere
• Mobile-friendly
• Can add URL parameters for tracking

Cons:

• User leaves your page
• Less integrated feel

Option 2: iFrame Embed

Use Case: Inline form on your page

Format:

<iframe 
  src="https://supportretriever.com/form/abc123" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border: none;">
</iframe>

Example Usage:

<div class="contact-section">
  <h2>Get in Touch</h2>
  <iframe 
    src="https://supportretriever.com/form/abc123" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none;">
  </iframe>
</div>

Responsive iFrame:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://supportretriever.com/form/abc123"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

Pros:

• Form stays on your page
• More integrated feel
• Full control over container styling

Cons:

• Requires iframe support
• May have cross-origin considerations
• Fixed height needed

Option 3: HTML Link Button

Use Case: Styled buttons that open the form

Simple Version:

<a href="https://supportretriever.com/form/abc123" class="support-btn">
  Contact Support
</a>

Styled Version (with inline styles):

<a 
  href="https://supportretriever.com/form/abc123" 
  style="display:inline-block;padding:12px 24px;background:var(--color-primary);color: var(--color-on-primary);text-decoration:none;border-radius:6px;font-family:sans-serif;">
  Contact Support
</a>

Custom Styled Button:

<a 
  href="https://supportretriever.com/form/abc123"
  class="btn btn-primary"
  style="
    display: inline-block;
    padding: 12px 24px;
    background: #007bff;
    color: var(--color-on-primary);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s;
  ">
  Get Support
</a>

Pros:

• Full control over button appearance
• Matches your site's design
• Works everywhere

Cons:

• User leaves your page
• Requires custom styling

URL Parameters for Tracking

Add query parameters to track where submissions come from:

https://supportretriever.com/form/abc123?source=homepage&campaign=summer2024&type=support

These parameters are automatically captured and stored with each submission for analytics.

Choosing the Right Option

Mobile Considerations

• Direct URL: Best mobile experience, opens full-screen
• iFrame: May need responsive wrapper, test on devices
• HTML Link: Works great, opens full-screen form

Testing Your Embed

Before going live:

1. Test on desktop browsers (Chrome, Firefox, Safari)
2. Test on mobile devices (iPhone, Android)
3. Test form submission end-to-end
4. Verify you receive submissions
5. Check that URL parameters are captured

Related Topics

• Form Customization
• Getting Started
• Why Not mailto