🏰 Dungeon Crawler RPG - Embed Integration Guide

Learn how to embed the medieval fantasy dungeon crawler on your website

📋 Method 1: Auto-Height Embed (Recommended)

No scrollbars: Game automatically adjusts height based on content. Perfect for responsive designs.

<!-- Add this div where you want the game to appear -->
<div id="dungeon-game"></div>

<!-- Auto-height embed - no fixed height needed! -->
<script src="https://dungeon-exe.replit.app/embed.js" 
        data-target="#dungeon-game"
        data-auto-height="true"
        data-min-height="400px"
        data-max-height="800px"
        data-responsive="true"></script>
            

🛠️ Method 2: JavaScript API with Auto-Height

For developers: Full programmatic control with automatic height adjustment.

<div id="game-container"></div>

<script src="https://dungeon-exe.replit.app/embed.js"></script>
<script>
// Embed with auto-height and custom styling
var gameEmbed = DungeonCrawlerEmbed.embed('#game-container', {
    width: '100%',
    autoHeight: true,
    minHeight: '450px',
    maxHeight: '900px',
    responsive: true,
    borderRadius: '12px',
    boxShadow: '0 8px 25px rgba(0, 0, 0, 0.2)'
});

// Optional: Add fullscreen button
document.getElementById('fullscreen-btn').onclick = function() {
    gameEmbed.fullscreen();
};
</script>
            

📱 Method 3: Mobile Auto-Height

Mobile-first: Auto-height with mobile-friendly constraints and touch-optimized design.

<div id="mobile-game"></div>

<script src="https://dungeon-exe.replit.app/embed.js" 
        data-target="#mobile-game"
        data-auto-height="true"
        data-min-height="350px"
        data-max-height="70vh"
        data-responsive="true"
        data-border-radius="16px"></script>
            

📝 Method 4: WordPress & Blog Auto-Height

For CMS users: Copy-paste HTML block with auto-height for WordPress, Blogger, or any CMS.

<!-- Copy this entire block into your WordPress post/page -->
<div style="margin: 20px 0; text-align: center;">
    <h3 style="color: #d97706; margin-bottom: 15px;">
        🏰 Play Dungeon Crawler RPG
    </h3>
    <div id="blog-dungeon-game" style="max-width: 800px; margin: 0 auto;"></div>
    <p style="font-size: 12px; color: #6b7280; margin-top: 10px;">
        Medieval fantasy adventure game - Use arrow keys to move, space to attack
    </p>
</div>

<script src="https://dungeon-exe.replit.app/embed.js" 
        data-target="#blog-dungeon-game"
        data-auto-height="true"
        data-min-height="450px"
        data-max-height="900px"
        data-responsive="true"></script>
            

⚙️ Configuration Options

Customize the embed: All available options for the embed script.

// Data attributes for script tag method:
data-target        // CSS selector for target element (required)
data-width         // Width (default: "100%")
data-height        // Height (default: "600px")
data-min-height    // Minimum height (default: "400px")
data-max-height    // Maximum height (default: "800px")
data-responsive    // Enable responsive behavior (default: true)
data-border        // Border style (default: "none")
data-border-radius // Border radius (default: "8px")

// JavaScript API options:
{
    width: '100%',              // Container width
    height: '600px',            // Container height
    minHeight: '400px',         // Minimum height for responsive
    maxHeight: '800px',         // Maximum height for responsive
    responsive: true,           // Enable responsive behavior
    border: 'none',             // iframe border
    borderRadius: '8px',        // Container border radius
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', // Container shadow
    backgroundColor: '#1c1917'   // Loading background color
}
            

✨ Embed Features

📱 100% Responsive

Automatically adapts to any screen size, from mobile phones to desktop monitors.

🔒 Secure Integration

Sandboxed iframe with proper security attributes and CORS handling.

⚡ Fast Loading

Lazy loading, optimized assets, and smooth loading animations.

🎮 Full Functionality

Complete game experience with save/load, audio, and all features.

🚀 Ready to embed?

Choose any method above and start integrating the Dungeon Crawler RPG into your website!

For support or custom integration needs, visit the main game page