Optimized Embed Code: Script-HTML Separation

Overview

When integrating Riddle content into your website, you can optimize the embed code by separating the JavaScript script from the HTML code. This method offers several advantages in terms of performance, maintainability, and web development best practices.

Standard Embed Code

The standard embed code contains both the script and HTML in one block:

<div class="riddle2-wrapper" 
     data-rid-id="{riddle id}" 
     data-auto-scroll="true" 
     data-is-fixed-height-enabled="false" 
     data-bg="#fff" 
     data-fg="#00205b" 
     style="margin:0 auto; max-width:100%; width:640px;">
  <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>
  <iframe title="Riddle title" 
          src="https://www.riddle.com/embed/a/{riddle id}?lazyImages=false&staticHeight=false" 
          allow="autoplay" 
          referrerpolicy="strict-origin">
  </iframe>
</div>

Optimized Version: Script-HTML Separation

1. Script in Head Section

Add the Riddle script once in the <head> section of your HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page</title>
    
    <!-- Riddle Embed Script - only once in head -->
    <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>
</head>
<body>
    <!-- Your page content -->
</body>
</html>

2. Simplified HTML Code

The embed code in the body is reduced to pure HTML without the script:

<div class="riddle2-wrapper" 
     data-rid-id="{riddle id}" 
     data-auto-scroll="true" 
     data-is-fixed-height-enabled="false" 
     data-bg="#fff" 
     data-fg="#00205b" 
     style="margin:0 auto; max-width:100%; width:640px;">
  <iframe title="Riddle title" 
          src="https://www.riddle.com/embed/a/{riddle id}?lazyImages=false&staticHeight=false" 
          allow="autoplay" 
          referrerpolicy="strict-origin">
  </iframe>
</div>

Benefits of Script-HTML Separation

🚀 Performance Optimization

  • Single Loading: The script is loaded only once, even with multiple Riddle embeds on the same page
  • Reduced File Size: HTML code becomes smaller and cleaner
  • Better Caching Efficiency: Browsers can cache the script more effectively

🔧 Maintainability

  • Cleaner Code: HTML structure becomes more organized and easier to maintain
  • Modular Architecture: Clear separation of functionality (JavaScript) and structure (HTML)

📱 Multiple Embeds

This method is particularly beneficial when using multiple Riddle embeds on one page:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Script only once in head -->
    <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>
</head>
<body>
    <!-- First Riddle -->
    <div class="riddle2-wrapper" data-rid-id="{riddle id}" ...>
        <iframe src="https://www.riddle.com/embed/a/{riddle id}..." ...></iframe>
    </div>
    
    <!-- Second Riddle without reloading script -->
    <div class="riddle2-wrapper" data-rid-id="ABC123XY" ...>
        <iframe src="https://www.riddle.com/embed/a/ABC123XY..." ...></iframe>
    </div>
    
    <!-- Additional Riddles... -->
</body>
</html>

🌐 SEO and Web Standards

  • Valid HTML: Complies with web standards for document structure
  • Better SEO: Search engines can index content more effectively
  • Accessibility: Screen readers and other assistive technologies work better

⚡ Loading Time Optimization

  • Earlier Script Execution: Script is loaded during the head section parsing
  • Parallel Loading: Browsers can load the script in parallel to other resources
  • Reduced Layout Shifts: Fewer DOM manipulations at runtime

Content Management Systems

This method is particularly beneficial for Content Management Systems:

WordPress

Important: Never modify the functions.php of an active theme directly, as these changes will be lost during theme updates.

Create a child theme and add the code to the child theme's functions.php:

// Child Theme functions.php - Include script once
function riddle_embed_script() {
    wp_enqueue_script('riddle-embed', 'https://www.riddle.com/embed/build-embedjs/embedV2.js', [], null, false);
}
add_action('wp_enqueue_scripts', 'riddle_embed_script');
Benefits of the Child Theme Solution
  • Update-safe: Preserves customizations when parent theme updates
  • Theme-specific: Integrates seamlessly with your theme's functionality
  • Full theme access: Can access parent theme functions and styles
  • WordPress standard: Follows official WordPress customization practices
  • Easy maintenance: All theme-related code stays within the theme structure

Option 2: Custom Plugin

Create a simple plugin (wp-content/plugins/riddle-embed/riddle-embed.php):

<?php
/**
 * Plugin Name: Riddle Embed Script
 * Description: Loads the Riddle Embed Script once in the head section
 * Version: 1.0
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

function riddle_embed_script() {
    wp_enqueue_script('riddle-embed', 'https://www.riddle.com/embed/build-embedjs/embedV2.js', [], '1.0', false);
}
add_action('wp_enqueue_scripts', 'riddle_embed_script');

Benefits of the Plugin Solution

  • Update-safe: Survives theme updates
  • Theme-independent: Works with any theme
  • Easy management: Can be activated/deactivated via WordPress Admin Panel

Drupal/Symfony/Laravel

Similar principles apply to other CMS and frameworks - the script is included once in the template structure.

Best Practices

  1. Script in Head: Include the Riddle script in the <head> section
  2. Async/Defer: Use async or defer for better performance: 
    <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js" async></script>
  3. CSP Policies: Consider Content Security Policies
  4. Error Handling: Implement fallbacks in case the script fails to load

⚠️ Important Considerations

  • Ensure the script loads before the embed codes
  • For dynamically loaded content, the script must already be available
  • Test the implementation across different browsers

Self-Hosting the Embed Script

For enhanced control and compliance requirements, you can host the embedV2.js script on your own servers instead of loading it from Riddle's CDN.

Benefits of Self-Hosting

  • Full Control: Complete control over script delivery and caching
  • Compliance: Meets strict data protection and security requirements
  • Performance: Can be optimized for your specific infrastructure
  • Reliability: No dependency on external CDN availability

Implementation

  1. Download the Script: Get the latest version from the Riddle embed repository
  2. Host on Your Server: Place the script on your web server
  3. Update Your Code: Reference your hosted version
<head>
    <!-- Self-hosted Riddle embed script -->
    <script src="/js/embedV2.js"></script>
</head>

Keeping Updated

⚠️ Important: When self-hosting, you're responsible for keeping the script updated.

Monitor for Updates: Watch the official Riddle embed repository for updates:

Setup GitHub Notifications

To stay informed about updates:

  1. Visit https://github.com/riddle-com/embed
  2. Click "Watch" → "Custom" → "Releases"
  3. You'll receive notifications when new versions are released

Automated Update Workflow

For production environments, consider implementing automated update checks:

# Example script to check for updates
#!/bin/bash
REPO_URL="https://api.github.com/repos/riddle-com/embed/commits/riddle2"
LOCAL_VERSION=$(cat /path/to/your/embedV2.version)
REMOTE_VERSION=$(curl -s $REPO_URL | jq -r '.sha')

if [ "$LOCAL_VERSION" != "$REMOTE_VERSION" ]; then
    echo "New version available: $REMOTE_VERSION"
    # Add your update logic here
fi

Summary

Separating script and HTML in Riddle embed codes offers significant advantages:

  • 🚀 Better performance through single script loading
  • 🔧 Easier maintenance and updates
  • 📱 Optimized for multiple embeds
  • 🌐 Complies with web standards and SEO best practices
  • ⚡ Reduced loading times and layout shifts

This method is especially recommended for professional websites with multiple Riddle content or when using Content Management Systems.

Table of Contents