Custom HTML

Basic Usage

Custom HTML lets you inject HTML elements into pages at specific locations. Use this to add custom content, modify page structure, or create full-page overlays.

Create a custom HTML rule:

  1. Select Custom from the toolbox
  2. Choose Custom HTML as the rule type
  3. Select the Position (Insert Before, Insert After, Replace Element, or Full Page)
  4. Use the element selector to choose where to insert your HTML
  5. Enter your HTML code in the editor
  6. Optionally add a URL Filter to limit the rule to specific pages
  7. Save the rule

Insertion Modes

Insert After: Places your HTML immediately after the selected element. The original element remains visible.

Insert Before: Places your HTML immediately before the selected element. Useful for adding content at the top of sections.

Replace Element: Replaces the selected element with your HTML. The original element is hidden but preserved for restoration.

Full Page: Creates a full-page overlay using an iframe. Your HTML is rendered in a fixed-position iframe that covers the entire page. Use this for complete page replacements or custom demo interfaces.

Element Targeting

Use the element selector to target where your HTML should be inserted:

  1. Click the element selector button
  2. Hover over the page to highlight elements
  3. Click the element where you want to insert your HTML
  4. The CSS selector is automatically generated

You can also manually enter a CSS selector (e.g., .header, #main-content, nav > ul).

HTML Examples

Add a banner:

<div style="background: #155DFC; color: white; padding: 20px; text-align: center;">
  <h2>Welcome to Acme Corp</h2>
  <p>Custom demo content</p>
</div>

Insert a notification:

<div class="notification" style="position: fixed; top: 20px; right: 20px; background: #00ff00; padding: 15px; border-radius: 8px; z-index: 9999;">
  New feature available!
</div>

Add custom buttons:

<div style="margin: 20px 0;">
  <button style="background: #155DFC; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">
    Custom Action
  </button>
</div>

Full-page overlay:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Custom Demo Interface</h1>
    <p>This is a full-page replacement.</p>
  </div>
</body>
</html>

Combining with CSS

Use custom HTML with custom CSS rules for styled content:

  1. Create a custom HTML rule with your structure
  2. Create a custom CSS rule to style the injected elements
  3. Use classes or IDs in your HTML that match your CSS selectors

Example:

<!-- HTML Rule -->
<div class="custom-banner">
  <h2>Welcome</h2>
</div>
/* CSS Rule */
.custom-banner {
  background: #155DFC;
  color: white;
  padding: 20px;
  text-align: center;
}

Multiple HTML Rules

You can create multiple HTML rules. Each rule operates independently:

  • Use different insertion modes for different elements
  • Combine Insert Before/After rules to add content around existing elements
  • Use URL filters to inject different HTML on different pages

Full-Page Mode

Full-page mode creates an iframe overlay that covers the entire page. Use this for:

  • Complete page replacements
  • Custom demo interfaces
  • Interactive demo experiences
  • Landing pages for demos

Important: Full-page mode hides the original page content. The iframe has a high z-index and covers the entire viewport.

How It Works

HTML is sanitized before injection to prevent security issues. Injected elements are marked with data attributes for tracking and cleanup. When demo mode is disabled, all injected HTML is removed and original elements are restored.

Tips

  • Use browser DevTools to inspect the page structure before creating HTML rules
  • Test insertion modes to see which works best for your use case
  • Combine HTML injection with text replacement for dynamic content
  • Use full-page mode sparingly—it completely replaces the page
  • Style your HTML with inline styles or create separate CSS rules
  • Toggle rules on/off to test different HTML combinations
  • Remember that injected HTML is removed when demo mode is disabled