Dynamically Replacing Images in Smart Builder

Are you looking to personalize your landing pages for different segments of visitors? 

You can use the Dynamic Image Replacement App to swap images on your page based on URL parameters, creating a more personalized experience for your page visitors.  

How does it work?

Dynamic image replacement customizes the content on your page to the unique page visitor, based on the URL they arrived at your landing page with. 

In SEO, a parameter is a tag or indicator you can append at the end of your landing page's URL.

It is a way for you to track & identify additional information about your page visitor, like which ad-click they arrived from, or other traffic sources & mediums (see more in Google's documentation here: About URL parameters).

For the use-case of dynamic image replacement, the URL parameter will determine which images will be replaced and updated dynamically on your page.

This way, you can control which images appear on your landing page, depending on the parameter in the URL.    

The value is the image (or the actual value) that ties back to the parameter. 

The URL would look something like this: yourlandingpage.com?parameter=value.

For example, with dynamic image replacement, the URL .../eastside-groomers.com?pet=cat will display an image of a cat at the start of the page instead of the default image:

Installing the Dynamic Image Replacement App

1. Navigate to the Apps tab on the left-hand side of Smart Builder.
2. Search and locate the Dynamic Image Replacement App.
3. Click the plus button next to Dynamic Image Replacement to install the app.

Once you've installed the app, you can apply it to the landing page.

Adding a Dynamic Image Element to Your Page

1. Add the Dynamic Image Replacement app to your page using drag and drop or by swapping out an existing element.
   •  Drag and Drop
     1. Click the Add tab on the left-hand side of Smart Builder. 
     2. Drag the app onto your page:
        
   • Changing an Element
     1. Single-click an existing element on your page, and click the Change Element  icon.
     2. Within the drop-down menu, locate the Utility tab. Select Dynamic Image Replacement from the list:
        
     3. The Dynamic Image Replacement app placeholder will appear on your page:
        

Configuring the Parameters & Values

You will need to set a distinct URL parameter in Smart Builder to determine which images will be replaced and updated dynamically. 

1. Single-click the image placeholder, and click the gear icon (Settings) at the bottom of the element. The Settings dialog box will appear:
2. In the Query Parameter field, enter your custom URL parameter:
   
3. Select the number of images you want to rotate. 
   • Use the plus and minus icons to increase or decrease the number of options.
     • For example, if you want different values such as cat, dog, bird, and rabbit, you'll set the Number of Options to 4.
4. Click outside the Settings window to complete the changes. 

Next, you will need to configure the values corresponding to each image. 

1. Single-click the Images  icon on the toolbar. The Design dialog box will appear:
   
   
2. Click the + button to add a Default Image you want to appear on your landing page.
   • This image will appear on your page if there are no matching parameters in the URL.
3. Select or upload an image from your Image Library or Unsplash or Pexels App(s).
   • Add Alt Text to the image if required.
4. Next, add your second image (Option #2).
   • Click the + button to add an image. Your Image Library will appear. 
   • Select or upload an image from your Image Library.
5. In the Query Parameter Value field for the second image, enter the value for that image: 
   
6. Continue these steps for the rest of the images.
7. Click outside the Design dialog box to complete these changes. 

And that's it! Be sure to Save and Publish your landing page to finalize these changes.

Testing Dynamic Image Replacement

Publish your page, and append the parameter and value to the end of your landing page's URL to test.

For example, yourlandingpage.com?parameter=value: