With Nexd, you have several ways to showcase your ads to clients and partners:
Export the tag and embed it directly on your website
Export the ad as video for easy sharing anywhere, learn more
Generate a campaign link that collects all your selected creatives on one Preview page (this page can even be white-labeled for some users)
But if you want to take it one step further and display interactive demos directly inside your own gallery or website, you can do so with our Preview.js library. This tool is what powers the preview experience on our own Nexd demo site, and it’s available for you to use too.
How Preview.js Works
Preview.js is a lightweight JavaScript library hosted on Nexd’s servers. It creates the familiar device frame, fake content, and ad preview you see on our demo site. By adding it to your site, you can make your creatives look and feel like real, live ads.
Step 1: Include the Library
Add this script tag to your site:
<script src="https://cdn.nexd.com/dist/Preview/preview.min.js"></script>
Step 2: Set Up the Preview
Choose where you want the preview to appear by creating a wrapper element in your HTML:
<div id="wrapper"></div>
Then initialize the preview inside that wrapper:
// wrapper where the preview component will be placed
const wrapper = document.querySelector('#wrapper');
const preview = new Preview(wrapper, [options | defaults]);
preview.load([options | null]);
// reloads the current creative (e.g., to reopen a closed interstitial)
preview.reload([options | null]);
preview.onload = () => {
// ad is ready
};
preview.onloadeddata = data => {
// ad data loaded
};
Step 3: Customize with Options
Preview.js comes with a variety of options that let you fine-tune the experience:
creative_id: Required for draft creatives.
live_id: Required for exported creatives.
content: Show or hide fake content (default:
true).device: Show or hide the device frame (default:
true).align: Position of the component inside the wrapper (
top,bottom, orundefined).screen_height / screen_width: Override default device screen sizes.
force_placement_device: Choose mobile (0), desktop (1), or no device (2).
loading: Show splash until the ad finishes loading (default:
true).scale: Automatically scale to the parent element (default:
true).poll: Continuously update the ad if changes are made in Campaign Manager.
Example: Simple Implementation
<div id="wrapper"></div>
<!-- Step 1: load Preview.js -->
<script src="https://cdn.nexd.com/dist/Preview/preview.min.js"></script>
<!-- Step 2: initialize Preview -->
<script>
const wrapper = document.querySelector('#wrapper');
const preview = new Preview(wrapper, {
api: 'https://api.nexd.com/',
cdn: 'https://cdn.nexd.com/',
live_id: '12345', // replace with your actual live ID
device: true,
content: true,
});
preview.load();
</script>
This will display your exported creative inside a mobile device frame, complete with fake content.
Next Steps
Add the Preview.js library to your site.
Configure it with your creative ID(s).
Customize the options for the best demo experience.
That’s it! You’ll now be able to present Nexd ads in your own gallery just like we do on the Nexd Preview site.