Components media

HtmlEmbed

Renders raw HTML content directly on the page. Use it for third‑party widgets, custom embeds, Calendly scheduling, Google Forms, social media embeds, custom badges, or any HTML snippet the user needs. Do not use it for videos; choose VideoPlayer instead.

Aktualisiert Mar 6, 2026

HtmlEmbed

Renders raw HTML content directly on the page. Use it for third‑party widgets, custom embeds, Calendly scheduling, Google Forms, social media embeds, custom badges, or any HTML snippet the user needs. Do not use it for videos; choose VideoPlayer instead.

Use Cases

  • Third‑party widget embeds (Calendly, Typeform, HubSpot)
  • Social media embeds (Twitter/X posts, Instagram posts, TikTok)
  • Custom HTML badges or shields
  • Google Maps iframe embeds (when Map component is insufficient)
  • Google Forms or other form embeds
  • Custom JavaScript widgets
  • Payment processor embeds (Stripe, PayPal buttons)
  • Live chat widget embeds
  • Custom analytics or tracking pixels

Properties

html

Raw HTML content to render. Can include any valid HTML tags, iframes, script tags, or embed codes. Type: string.

customCss

Custom CSS styles for the container. Applies to the outermost wrapper. Type: string.

Best Practices

  • Use VideoPlayer for YouTube/Vimeo — it has responsive controls, thumbnails, and lazy loading
  • Only use HtmlEmbed when no dedicated component exists for the content type
  • Keep HTML minimal and well‑formed
  • Test that embedded content is responsive (use width: 100% where possible)
  • Third‑party scripts may affect page load performance — use sparingly

Common Mistakes

Using HtmlEmbed for YouTube or Vimeo videos

Why it's a problem: VideoPlayer provides responsive playback, controls, thumbnails, and lazy loading. Raw iframes lack all of this.

Fix: Use page.VideoPlayer({ url: 'https://youtube.com/watch?v=...' }) instead.

Embedding very large HTML blocks

Why it's a problem: Large HTML blocks are hard to maintain and may break the page layout.

Fix: Keep embedded HTML focused and minimal. For complex layouts, use native components.

Tags

htmlembed media third-party widget social custom html

Verwandte Komponenten

HtmlEmbed

Bereit zu bauen?

Starten Sie die Erstellung Ihrer App kostenlos mit Qödiak.

Kostenlos loslegen

Verwandte Artikel

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

Button

Interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom‑script with navigation. Two visual variants are available, and the button can be enabled or disabled dynamically based on data context.

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders a set of checkboxes with individual labels and can be arranged vertically or horizontally.

CountdownTimer

Real-time countdown timer component that displays the time remaining until a target date/time. It updates every second, offers customizable formatting, and shows a completion message when the countdown ends. Suitable for any site type.