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:

Adding the Dynamic Image Replacement App to Smart Builder

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.
4. You may see a dialog box that appears, explaining that you can swap an element on your page with this App:
   

To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page.

Once you've installed the App, you can apply it to the landing page in Smart Builder.

Adding a Dynamic Image Element to Your Page

1. Single-click an existing image on your page, and click the Change Element  icon that appears at the bottom of the image.
   • Or, you can replace any element on your page, such as a paragraph, a button, a heading, etc., with this Dynamic Image Replacement App. It does not have to be an existing image on your page.   
2. A drop-down menu will appear; 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) that appears 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 to complete the changes. 

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

1. Single-click the Design 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, if you have the Unsplash or Pexels App(s) installed, you can select one from there.
4. The default image will appear in Smart Builder:
   
   • Add Alt Text to the image if required.
5. Next, add in 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.
6. In the Query Parameter Value field for the second image, enter the value for each image: 
   
7. Continue these steps for the rest of the images.
8. 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: