Media Kit Integration Guide

This technical guide explains how to integrate media kit iframes into your event website and handle the complete exhibitor experience.

Overview

The media kit system provides a seamless iframe integration that allows exhibitors to create and download branded graphics directly from your event website. This guide covers the technical implementation and best practices.

Integration Methods

Basic Iframe Integration

The simplest integration method uses a standard HTML iframe:

<iframe
  src="https://your-domain.com/embed/event-id"
  width="100%"
  height="600px"
  frameborder="0"
  allowfullscreen
>
</iframe>

Responsive Integration

For better mobile experience, use responsive iframe techniques:

<div
  class="media-kit-container"
  style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"
>
  <iframe
    src="https://your-domain.com/embed/event-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  >
  </iframe>
</div>

Advanced Integration with PostMessage

For enhanced communication between parent and iframe:

// Listen for messages from the iframe
window.addEventListener("message", function (event) {
  // Verify origin for security
  if (event.origin !== "https://your-domain.com") return;

  switch (event.data.type) {
    case "download-started":
      console.log("Exhibitor started download");
      break;
    case "download-completed":
      console.log("Download completed:", event.data.filename);
      break;
    case "error":
      console.error("Iframe error:", event.data.message);
      break;
  }
});

// Send data to iframe (if needed)
const iframe = document.getElementById("media-kit-iframe");
iframe.contentWindow.postMessage(
  {
    type: "exhibitor-data",
    companyName: "Exhibitor Name",
    standNumber: "A-123",
  },
  "https://your-domain.com",
);

URL Parameters

The iframe supports several URL parameters for customization:

Basic Parameters

eventId - The event identifier (required)
theme - Color theme override
locale - Language preference (en, fr)

Advanced Parameters

companyName - Pre-fill company name
standNumber - Pre-fill stand number
invitationCode - Pre-fill invitation code
logo - Pre-fill logo URL

Example with Parameters

<iframe
  src="https://your-domain.com/embed/event-id?theme=dark&locale=fr&companyName=Sample%20Company"
  width="100%"
  height="600px"
  frameborder="0"
>
</iframe>

Security Considerations

Content Security Policy (CSP)

Configure your CSP headers to allow the iframe:

Content-Security-Policy: frame-src 'self' https://your-domain.com;

X-Frame-Options

Ensure your iframe endpoint allows embedding:

X-Frame-Options: SAMEORIGIN

HTTPS Requirements

Always use HTTPS for iframe sources to ensure security and avoid mixed content warnings.

Styling and Customization

CSS Customization

You can style the iframe container:

.media-kit-container {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.media-kit-container iframe {
  border: none;
  display: block;
}

Theme Integration

The iframe automatically adapts to your event's theme settings:

Primary color
Secondary color
Text color
Border radius

Error Handling

Common Error Scenarios

Event not published: Show appropriate message
Invalid event ID: Redirect to error page
Network issues: Display retry mechanism
Browser compatibility: Provide fallback

Error Handling Implementation

const iframe = document.getElementById("media-kit-iframe");

iframe.onload = function () {
  // Iframe loaded successfully
  console.log("Media kit loaded");
};

iframe.onerror = function () {
  // Handle iframe loading errors
  console.error("Failed to load media kit");
  // Show fallback content or error message
};

Performance Optimization

Lazy Loading

Implement lazy loading for better performance:

<iframe
  src="https://your-domain.com/embed/event-id"
  width="100%"
  height="600px"
  frameborder="0"
  loading="lazy"
>
</iframe>

Preloading

Preload the iframe for better user experience:

<link
  rel="preload"
  href="https://your-domain.com/embed/event-id"
  as="document"
/>

Analytics Integration

Track Usage

Implement analytics to track media kit usage:

// Track iframe interactions
window.addEventListener("message", function (event) {
  if (event.origin !== "https://your-domain.com") return;

  if (event.data.type === "download-started") {
    // Track download initiation
    gtag("event", "media_kit_download", {
      event_category: "engagement",
      event_label: event.data.templateType,
    });
  }
});

Custom Analytics Events

// Track specific user actions
function trackMediaKitAction(action, details) {
  gtag("event", "media_kit_action", {
    event_category: "media_kit",
    event_label: action,
    custom_parameters: details,
  });
}

Testing

Cross-Browser Testing

Test your integration across different browsers:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers

Responsive Testing

Test on various screen sizes:

Desktop (1920x1080)
Laptop (1366x768)
Tablet (768x1024)
Mobile (375x667)

Performance Testing

Monitor iframe performance:

Load time
Memory usage
Network requests
User interactions

Troubleshooting

Common Issues

Iframe not loading:

Check if event is published
Verify URL is correct
Check browser console for errors
Ensure HTTPS is used

Styling issues:

Check CSS conflicts
Verify iframe dimensions
Test responsive behavior
Check z-index conflicts

Performance issues:

Implement lazy loading
Optimize parent page
Check network conditions
Monitor resource usage

Debug Mode

Enable debug mode for troubleshooting:

<iframe
  src="https://your-domain.com/embed/event-id?debug=true"
  width="100%"
  height="600px"
  frameborder="0"
>
</iframe>

Best Practices

Implementation

Always use HTTPS
Implement proper error handling
Test across devices and browsers
Monitor performance metrics

User Experience

Provide clear instructions
Handle loading states
Implement fallbacks
Ensure accessibility

Security

Validate all inputs
Use secure communication
Implement proper CSP
Regular security audits

Support

For technical support:

Check this documentation
Review error logs
Test in different environments
Contact development team with:
- Error messages
- Browser information
- Steps to reproduce
- Screenshots if applicable

Your media kit integration is now ready to provide exhibitors with a seamless experience!