How to Swap Images with URL Parameters

This script replaces a default image on your page with a different image, based on a URL parameter. It works like Dynamic Text Replacement for images. You add an image in the builder, then pass the URL of a replacement image in the page URL.

See the demo page built in Unbounce.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Add the script to your page

1. Copy the script from image-swap.html on GitHub and add it to the JavaScripts section.
2. Add one or more default images with the image element. In the script, enter the IDs of the images you want to swap.
3. Choose the URL parameter that will carry the new image URL, and set it in the // Add URL parameters section of the script. For example, with a parameter named image, your page URL would look like http://mydomain.com/page/?image=URL-OF-IMAGE, and the script would include the following:

>      // Add URL parameters
>         var img1 = getURLParameter('image');

4. Build your page URL with the address of the replacement image as the parameter value. A URL shortener can keep the link shorter.

Notes

• The replacement image takes the same dimensions as the default image. Use images of the same size and proportions to avoid stretching.
• The script supports two images by default. To swap more, add a variable for each additional default image and parameter.