Displaying the Photo Gallery Across All Campaign Steps (in media upload campaigns)

Q: How do I automatically include the photo campaign gallery underneath the content on every step (except the actual gallery step)?

A: By default, the photo gallery only appears on the dedicated "Gallery" step. However, you can make it visible on other steps by injecting it via an iframe. This is done by creating a custom script in your Tag Library and applying it to your campaign.

Here is the step-by-step guide on how to set this up:

Step 1: Create a new tag in the Tag Library

1. Navigate to your Tag Library.
2. Create a new tag and give it a recognizable name (e.g., "Always-on Photo Gallery").
3. Paste the following JavaScript code into the tag configuration:

<script>
console.log('loading load-gallery-iframe ', location.hostname);
document.addEventListener('DOMContentLoaded', function() {
  const isGalleryPage = window.location.search.includes('galerie=true');
  const isInIframe = window.parent !== window;
  
  if (isGalleryPage && isInIframe) {
    console.log('gallery page loaded in iframe, hiding everything but the gallery...');
    // hide everything but gallery to prevent infinite nested headers/footers
    document.getElementById('responsive_tools').style.display = 'none';
    document.getElementById('bandeau_sup').style.display = 'none';
    document.getElementById('footer').style.display = 'none';
  } else if (!isGalleryPage) {
    console.log('campaign page (not gallery), loading gallery iframe...');
    const link = document.getElementById('s_gallery');
    const qualifioBox = document.getElementById('qualifioBox');
    
    if (link && link.href) {
      const iframe = document.createElement('iframe');
      iframe.src = link.href;
      iframe.style.width = '100%';
      iframe.style.height = '500px'; // Adjust as needed
      iframe.style.border = 'none'; // Remove border
      iframe.style.backgroundColor = 'transparent'; // transparent background
      iframe.setAttribute('allowtransparency', 'true');
      qualifioBox.appendChild(iframe);
    }
  }
});
</script>

Note: You can adjust the iframe.style.height = '500px'; line in the code if you need the gallery area to be taller or shorter.

Step 2: Include the tag in your campaign

1. Open your photo campaign and navigate to the Channels step.
2. Go to the Tags section for your selected channel.
3. Attach the newly created "Always-on Photo Gallery" tag to your campaign.

Once saved, the script will automatically check if the user is on the gallery step. If they aren't, it will append an embedded version of the gallery securely to the bottom of the campaign content!