Skip to main content

Responsive Iframe Embed (/embed/widget)

For partner platforms operating under strict Content Security Policies (CSP) that prohibit arbitrary third-party JavaScript execution (e.g. enterprise portals, Shopify stores, Webflow, Squarespace, or mobile WebViews), HiTech provides an official server-rendered iframe route.

The route is available across all supported locales:

  • Default: https://hitechinsurance.ai/embed/widget
  • Localized English: https://hitechinsurance.ai/en/embed/widget
  • Localized Spanish: https://hitechinsurance.ai/es/embed/widget

1. Architecture & Rendering Characteristics​

The iframe route is implemented as a specialized Server Component at src/app/[locale]/embed/widget/page.tsx.

Key Architectural Traits​

  1. Zero SEO Indexing: Emits robots: { index: false, follow: false } metadata so search engine spiders do not index isolated widget frames as duplicate thin content.
  2. Transparent Viewport Canvas: Renders on a background: transparent container, blending seamlessly with the host container's background color or textures.
  3. Automatic Multilingual Localization: If rendered via /es/embed/widget, button copy and subheadlines automatically default to Spanish ("Cotización Gratis", "Cobertura Inteligente para Cada Necesidad").
  4. Link Hardening: All outbound links use target="_blank" rel="noopener noreferrer".

2. Embedding Code Snippets​

Standard Card Embed (Responsive)​

<iframe
  src="https://hitechinsurance.ai/embed/widget?theme=dark&variant=card&utm=broker_portal_123"
  width="100%"
  height="90"
  frameborder="0"
  scrolling="no"
  loading="lazy"
  style="border: none; overflow: hidden; width: 100%; max-width: 560px;"
  title="HiTech Insurance Partner Badge"
></iframe>

Compact Pill Embed​

<iframe
  src="https://hitechinsurance.ai/embed/widget?theme=light&variant=pill&utm=automotive_blog"
  width="100%"
  height="60"
  frameborder="0"
  scrolling="no"
  loading="lazy"
  style="border: none; overflow: hidden; width: 100%; max-width: 420px;"
  title="HiTech Insurance Quote Pill"
></iframe>

3. Query Parameter Reference​

The iframe route supports the following search parameters:

Query ParameterAllowed ValuesDefaultPurpose
themedark | lightdarkControls color palette: deep midnight slate gradient (#0b1120 to #0f172a) vs crisp snow white (#ffffff to #f8fafc).
variantcard | pillcardDimensions and radius. card uses max-width: 560px with 14px border radius. pill uses max-width: 420px with pill-shaped 9999px radius.
utmstringpartner_embedAttribution source tracking token attached to the referral URL.
ctastring"Get Free Quote" (EN) / "Cotización Gratis" (ES)Text inside the orange gradient action button.
taglinestring"Smart Coverage for Every Need..." (EN/ES)Subtitle text displayed beneath the brand title.

4. CMS Platform Integration Guides​

WordPress (Block & Classic Editor)​

  1. In the page or template editor, insert a Custom HTML block.
  2. Paste the iframe snippet above.
  3. If using AMP or strict security plugins (like Wordfence or iThemes), add https://hitechinsurance.ai to your permitted iframe origins.

Webflow​

  1. Drag an Embed element from the Add panel into your desired container.
  2. Paste the iframe code snippet.
  3. Configure the Webflow parent div to width: 100%, display: flex, and justify-content: center.

Squarespace​

  1. Click an insertion point on any page and choose the Code block.
  2. Ensure HTML is selected and Display Source is unchecked.
  3. Paste the iframe snippet.

Shopify​

  1. Under Online Store → Themes → Customize, add a Custom Liquid section.
  2. Paste the responsive iframe snippet. Set the container margins to 16px 0.

5. Security & Sandbox Attributes​

If your security policy enforces strict sandbox flags on external iframes, the following permissions are required:

<iframe
  src="https://hitechinsurance.ai/embed/widget?utm=sandboxed_app"
  sandbox="allow-scripts allow-popups allow-forms allow-same-origin"
  width="100%"
  height="90"
  frameborder="0"
></iframe>

[!IMPORTANT] The allow-popups attribute is mandatory because the CTA button navigates the user into the HiTech quote funnel via a new tab (target="_blank"). Without allow-popups, the browser will block the user interaction.