Media Banners

Banner Hosting Instructions

A fun and engaging banner where users can swipe to reveal hidden content beneath a top layer. This banner can be hosted on Google Ad platforms or non-Google platforms.

For non-Google platforms:

Add the Banner

• Embed the Scratch to Reveal banner using the following <iframe> code:

  <iframe
   src="https://yourdomain.com/path-to-banner/ScratchToReveal.html"
   style="border: none;"
   width="300"
   height="600">
  </iframe>
                      

Key Features

• Interactive scratch-to-reveal effect.
• Perfect for promotional campaigns or mystery content.
• Responsive design ensures smooth functionality across devices.

Notes

• Ensure the top and bottom images align correctly for a clean reveal.
• Test swipe functionality across devices to confirm compatibility.

Why Choose?

The Scratch to Reveal banner is an exciting way to engage users, making it perfect for promotional events or interactive campaigns.

Banner Hosting Instructions

This banner showcases a dynamic before-and-after effect. Users can drag their mouse or swipe on mobile devices to compare two images seamlessly. This banner can be hosted on Google Ad platforms or non-Google platforms.

For non-Google platforms:

Add the Banner

• Embed the Before & After banner using the following <iframe> code:

  <iframe
   src="https://yourdomain.com/path-to-banner/BeforeAfter.html"
   style="border: none;"
   width="300"
   height="250">
  </iframe>
                      

Key Features

• Drag-and-swipe functionality for a smooth before-and-after effect.
• Perfect for visual comparisons, such as product transformations.
• Fully responsive for mobile and desktop use.

Notes

• Image quality is crucial to maximize the impact of the effect.
• Test swipe functionality on mobile to ensure seamless interaction.

Why Choose?

The Before & After banner offers a highly engaging way to demonstrate transformations, ideal for product showcases or campaigns requiring a comparison.

Banner Hosting Instructions

An integrated video banner that supports both hosted MP4 videos and YouTube URLs, offering flexibility in media presentation. This banner can be hosted on Google Ad platforms or non-Google platforms.

For non-Google platforms:

Add the Banner

• Embed the In-Page Video banner using the following <iframe> code:

  <iframe
   src="https://yourdomain.com/path-to-banner/InPageVideo.html"
   style="border: none;"
   width="300"
   height="600">
  </iframe>
                      

Key Features

• Supports autoplay, play/pause controls, and mobile-friendly designs.
• Works seamlessly with both hosted videos and YouTube URLs.
• Lightweight implementation with no additional scripts required.

Notes

• Ensure video formats comply with hosting requirements (e.g., MP4).
• YouTube URLs must be valid and properly embedded.

Why Choose?

The In-Page Video banner provides a dynamic way to communicate through multimedia, enhancing user engagement with visual storytelling.

Banner Hosting Instructions

An elegant banner designed to display a gallery of images with smooth transitions and pagination controls. This banner can be hosted on Google Ad platforms or non-Google platforms.

For non-Google platforms:

Add the Banner

• Embed the Gallery banner using the following <iframe> code:

  <iframe
   src="https://yourdomain.com/path-to-banner/GalleryWTransition.html"
   style="border: none;"
   width="300"
   height="250">
  </iframe>
                      

Key Features

• Automatic transitions between images.
• Pagination dots for manual navigation.
• Fully customizable transition effects.

Notes

• Use high-resolution images to ensure the gallery looks professional.
• Test auto-play functionality to confirm a seamless experience.

Why Choose?

The Gallery with Transition banner is ideal for displaying multiple visuals in a clean and modern layout, creating an appealing user experience.

Parallax Banner Hosting Instructions

Our Parallax banners are designed to provide a rich, interactive scrolling experience. They dynamically react to user scrolling, offering a visually engaging element to any webpage. These banners can be hosted on non-Google platforms with ease, using a custom JavaScript file (dic.js) to handle the parallax effect and iframe integration.

Integration Steps for Non-Google Platforms

To integrate the Parallax banner into your website, follow these steps:

1. Include the JavaScript File

• Add the following <script> tag to the <head> of the webpage where the banner will be embedded:

  <script src="https://dicom-interactive.com/banners/dic.js"></script>

• Alternatively, you can host dic.js alongside the Parallax banner files and update the src path accordingly.

2. Embed the Parallax Banner

• Add a scrollable container (<div>) and an iframe for the banner into your webpage:

      <div id="scrollableElement">
          <iframe
              id="myParallaxIframe"
              class="dic dic-parallax"
              scroller="#scrollableElement"
              scrolling="no"
              src="https://yourdomain.com/path-to-banner/banner.html"
              style="border: none;"
              width="300"
              height="250">
          </iframe>
      </div>
                      

• Key Attributes:
  
  • scroller=“#scrollableElement”: Links the iframe to the specified scrollable container for proper parallax synchronization.
  • scrolling=“no”: Ensures the iframe doesn’t introduce its own scrollbars.

Key Features

• Interactive Scrolling: The Parallax banner reacts dynamically to user scrolling, creating a smooth, visually engaging experience.
• Customizable Scroller: You can specify any scrollable element (e.g., #scrollableElement) to control the parallax effect.
• Easy Integration: Add the dic.js file and a simple iframe structure to your site—no additional configurations required.

Notes

1. The width and height of the iframe should match the banner’s dimensions.
2. Ensure the src in the <iframe> points to the correct banner HTML file location on your hosting platform.
3. The scrollable container (#scrollableElement) should have the appropriate dimensions and styles to allow scrolling:

       #scrollableElement {
           height: 100vh; /* Full viewport height */
           overflow-y: scroll; /* Enable vertical scrolling */
       }
                       

Why Choose Parallax Banners?

• Enhanced Engagement: Parallax banners are perfect for capturing user attention and boosting interaction.
• Flexible Hosting: Our banners can be hosted on non-Google platforms while retaining the same functionality as Google-hosted banners.
• Lightweight Integration: With our dic.js file, implementation is seamless and efficient.

Expandable Banner Hosting Options

Our expandable banners are highly versatile and can be hosted on both Google Ad platforms (e.g., Google Ads, DV360) and non-Google hosting platforms. Below, we detail the requirements for hosting banners on non-Google platforms, including how to set up our expandable banners with a custom JavaScript handler.

Hosting on Non-Google Platforms

To host our expandable banners on non-Google platforms, we provide a lightweight JavaScript file (dic.js) that ensures seamless expand/collapse functionality by dynamically resizing the iframe. This allows the expandable banner to function exactly as intended, while the embedded content remains user-friendly and responsive.

Integration Steps for Non-Google Platforms

1. Include the JavaScript File

• Add the following <script> tag to the <head> of the website where the banner will be embedded:

  <script src="https://dicom-interactive.com/banners/dic.js"></script>

• Alternatively, you can host dic.js alongside the expandable banner files and update the src path accordingly.

2. Embed the Expandable Banner

Add the iframe block to your webpage where you want the banner to appear. The example below demonstrates embedding an expandable banner:

<iframe
    id="myExpandableIframe"
    class="dic dic-expandable"
    src="https://yourdomain.com/path-to-banner/banner.html"
    style="border: none;"
    width="320"
    height="50">
</iframe>
            

Key Features

• Dynamic Resizing: dic.js handles the iframe resizing automatically. When users interact with the banner, the iframe resizes dynamically to display the expanded state, then collapses when required.
• Flexibility: Our banners can integrate into any hosting platform while maintaining the same expand/collapse functionality as Google-hosted banners.
• Easy Setup: Simply include the JavaScript file and iframe code in your website—no complex configurations needed.

Notes

• Ensure the iframe src points to the correct banner HTML file location on your hosting platform.
• The initial width and height values in the <iframe> tag should match the dimensions of the collapsed state of your banner (e.g., 320x50).
• The dic.js file should either be hosted at the default URL https://dicom-interactive.com/banners/dic.js or alongside your banner files.