Embedding a Gallery
Embedding a gallery directly on your website provides a smoother and more engaging user experience than using an iFrame. Follow the steps below to add the gallery to your existing website or landing page.
BEFORE YOU START ADDING THE CODE TO YOUR WEBSITE
1. Locate your Gallery ID - It will be inside your CoupJoy Account or your rep can give it to you.
2. Add the domain you will be loading the gallery to in your license settings.
How to add your gallery code to your website.
Add to the <head>
1. CoupJoy default stylesheet
<link rel="stylesheet" href="https://coupjoy.com/css/remote_gallery.css">
2. The gallery id - You will get this from the admin portal
Insert your gallery ID where it says GALLERY-ID-HERE
<script>const gid = "GALLERY-ID-HERE";</script>
Add somewhere in the <body>
3. This is where the gallery will be rendered
<div class="gallery-container">
<div id="gallery-container">
<!-- Content will be loaded here -->
</div>
</div>4. Template for the Gallery
<!-- Gallery Template -->
<script id="gallery-template" type="text/x-handlebars-template">
<div class="gallery-header">
<!-- Gallery Search -->
<div id="gallery-search-bar" class="search-wrapper">
<div class="search-input-group">
<input type="text" id="search-input" class="search-input" placeholder="Search coupons...">
<button class="search-clear-btn" id="clear-search" onclick="clearSearch()" style="display: none;">
<i class="fas fa-times-circle"></i>
</button>
<button id="search-button" class="search-btn" onclick="searchCoupons()">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<!-- Gallery Print Bags -->
<div class="gallery-bags">
<button class="bag-button shadow" id="print-bag-button" data-coupon-type="print" onclick="printBag('print')">
(0) <i class="fas fa-print"></i>
</button>
<button class="bag-button shadow" id="digital-bag-button" data-coupon-type="digital" onclick="printBag('digital')">
(0) <i class="fas fa-mobile-alt"></i>
</button>
</div>
</div>
<!-- Gallery Coupon Render -->
<div class="gallery-coupon-container" id="gallery-coupon-container">
{{#each coupons}}
<div class="content-card gallery-coupon shadow">
<div class="coupon-details-container">
{{renderImage imageUrl title "coupon-product-image"}}
<div class="coupon-details">
<p class="coupon-title">{{title}}</p>
<p class="coupon-description">{{description}}</p>
<a href="javascript:void(0);" onclick="showCouponDetails('{{id}}')" class="coupon-details-link"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<div class="gallery-buttons">
{{#if ai8110.print }}
<button class="clip-button shadow" onclick="toggleSelect(this, 'print')" id="{{id}}" data-coupon-type="print"><i class="fas fa-print"></i></button>
{{/if}}
{{#if ai8112.digital }}
<button class="clip-button shadow" onclick="toggleSelect(this, 'digital')" id="{{id}}" data-coupon-type="digital">
<i class="fas fa-mobile-alt"></i>
</button>
{{/if}}
</div>
</div>
{{/each}}
</div>
<!-- Gallery Pagination -->
<div id="gallery-pagination">
<div class="pagination-container">
<button class="pagination-btn" id="prev-btn" onclick="goToPreviousPage()">
<i class="fas fa-chevron-left"></i>
</button>
<div class="pagination-pages" id="pagination-pages">
<!-- Page numbers will be inserted here -->
</div>
<button class="pagination-btn" id="next-btn" onclick="goToNextPage()">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="pagination-size-selector">
<select id="page-size" onchange="changePageSize()">
<option value="12" selected>12 / page</option>
<option value="24">24 / page</option>
<option value="36">36 / page</option>
<option value="48">48 / page</option>
</select>
</div>
</div>
</script>5. Template for the Information Modal
<!-- Info Modal Template -->
<script id="modal-template" type="text/x-handlebars-template">
<h4 class="coupon-title">{{title}}</h4>
<p class="coupon-description">{{description}}</p>
{{#if ai8110.legalText}}
<hr class="dashed-divider" />
<h4>Print Legal Text</h4>
<div class="legal-text">
{{{base64Decode ai8110.legalText}}}
</div>
{{/if}}
{{#if ai8112.legalText}}
<hr class="dashed-divider" />
<h4>Digital Legal Text</h4>
<div class="legal-text">
{{{base64Decode ai8110.legalText}}}
</div>
{{/if}}
</script>6. Placeholder for the Modal
<div id="coupon-details-modal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeCouponDetails()">×</span>
<div id="modal-coupon-details">
</div>
</div>
</div>Add to the bottom of the <body>
7. Code that generates the gallery
<script src="https://coupjoy.com/js/remote_gallery.js"></script>
EXAMPLE USAGE -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remote Gallery Test</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remote Gallery Example</title>
<link rel="stylesheet" href="https://coupjoy.com/css/remote_gallery.css">
<link rel="icon" href="/favicon.ico" />
<script>const gid = "1cce315e-ee8f-425e-8b1e-6f18ab8e3de4";</script>
<!-- <script>const guestToken = "0b4c29cb-f264-4b6a-b92f-7cd1fe4a7050";</script> -->
</head>
<body>
<div class="gallery-container">
<div id="gallery-container">
<!-- Content will be loaded here -->
</div>
</div>
<!-- Gallery Template -->
<script id="gallery-template" type="text/x-handlebars-template">
<div class="gallery-header">
<!-- Gallery Search -->
<div id="gallery-search-bar" class="search-wrapper">
<div class="search-input-group">
<input type="text" id="search-input" class="search-input" placeholder="Search coupons...">
<button class="search-clear-btn" id="clear-search" onclick="clearSearch()" style="display: none;">
<i class="fas fa-times-circle"></i>
</button>
<button id="search-button" class="search-btn" onclick="searchCoupons()">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<!-- Gallery Print Bags -->
<div class="gallery-bags">
<button class="bag-button shadow" id="print-bag-button" data-coupon-type="print" onclick="printBag('print')">
(0) <i class="fas fa-print"></i>
</button>
<button class="bag-button shadow" id="digital-bag-button" data-coupon-type="digital" onclick="printBag('digital')">
(0) <i class="fas fa-mobile-alt"></i>
</button>
</div>
</div>
<!-- Gallery Coupon Render -->
<div class="gallery-coupon-container" id="gallery-coupon-container">
{{#each coupons}}
<div class="content-card gallery-coupon shadow">
<div class="coupon-details-container">
{{renderImage imageUrl title "coupon-product-image"}}
<div class="coupon-details">
<p class="coupon-title">{{title}}</p>
<p class="coupon-description">{{description}}</p>
<a href="javascript:void(0);" onclick="showCouponDetails('{{id}}')" class="coupon-details-link"><i class="fas fa-info-circle"></i></a>
</div>
</div>
<div class="gallery-buttons">
{{#if ai8110.print }}
<button class="clip-button shadow" onclick="toggleSelect(this, 'print')" id="{{id}}" data-coupon-type="print"><i class="fas fa-print"></i></button>
{{/if}}
{{#if ai8112.digital }}
<button class="clip-button shadow" onclick="toggleSelect(this, 'digital')" id="{{id}}" data-coupon-type="digital">
<i class="fas fa-mobile-alt"></i>
</button>
{{/if}}
</div>
</div>
{{/each}}
</div>
<!-- Gallery Pagination -->
<div id="gallery-pagination">
<div class="pagination-container">
<button class="pagination-btn" id="prev-btn" onclick="goToPreviousPage()">
<i class="fas fa-chevron-left"></i>
</button>
<div class="pagination-pages" id="pagination-pages">
<!-- Page numbers will be inserted here -->
</div>
<button class="pagination-btn" id="next-btn" onclick="goToNextPage()">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="pagination-size-selector">
<select id="page-size" onchange="changePageSize()">
<option value="12" selected>12 / page</option>
<option value="24">24 / page</option>
<option value="36">36 / page</option>
<option value="48">48 / page</option>
</select>
</div>
</div>
</script>
<!-- Info Modal Template -->
<script id="modal-template" type="text/x-handlebars-template">
<h4 class="coupon-title">{{title}}</h4>
<p class="coupon-description">{{description}}</p>
{{#if ai8110.legalText}}
<hr class="dashed-divider" />
<h4>Print Legal Text</h4>
<div class="legal-text">
{{{base64Decode ai8110.legalText}}}
</div>
{{/if}}
{{#if ai8112.legalText}}
<hr class="dashed-divider" />
<h4>Digital Legal Text</h4>
<div class="legal-text">
{{{base64Decode ai8110.legalText}}}
</div>
{{/if}}
</script>
<div id="coupon-details-modal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeCouponDetails()">×</span>
<div id="modal-coupon-details">
</div>
</div>
</div>
<script src="https://coupjoy.com/js/remote_gallery.js"></script>
</body>
</html>Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article