How to add an image carousel to a landing page

In order to build a more powerful landing page that shows an image carousel with images of each gift you are offering, please follow the steps below. 

This is an example of a landing page that has an image carousel:

Click here to view the page!

Advantages of having an image carousel

1. Users can browse the images related to each gift you are offering on the page
2. When a user chooses a gift, they can automatically see the image related to that gift
3. Offers a more personalized experience 

How to add an image carousel to a landing page

In order to add an image carousel to a landing page, this requires updating an HTML code block so please watch the video carefully. 

Watch the video below to see how you can add an image carousel to a landing page:

You can also follow the steps below:

1. Prepare your gift images

In order to add images to a carousel, you must first prepare the image URL links that will be used in the HTML code block.

If you already have the images, make sure they are saved in your computer.

If you want to get the image from a Reachdesk gift campaign (if it's a marketplace gift):

1. Go to the Campaigns page
2. Click on the campaign and you will see a modal
3. Click on the campaign image to expand it.
4. Right click and save the image in your computer.
5. Do this for every campaign you want to add to your landing page.

2. Create your landing page from the "Image Carousel" template

1. Go to Landing Pages
2. Click Create Landing Page
3. Select the template for "Image Carousel"
4. For now, just click save.
5. Populate the details of your landing page and add the campaigns you want to show up on the page.
6. Once you are done, save the page.

3. Generate the image URL links

1. Click on Edit page.
2. On the right side, click on the "Image" component and drag and drop this anywhere on your page. We are only using this to upload your images and generate a link so we will remove it later!
3. Click "Browse." You will see a modal where you can upload images.
4. Click "Upload"
5. Select the image you want to appear in your landing page and upload it.
6. Click on the Preview icon of the image (see how it looks below)

7. The image URL will appear in a new tab. Copy that URL link and save it somewhere.

8. Do the same for all the other images you want to upload. Make sure you save the URL links for each image because we will use them for the HTML code later.

9. Once you are done, you can remove the image content from the page.

4. Fetch your campaign Ids

1. Go to each of the campaign you added to your landing page.
2. In the URL copy the number that appears after campaigns/. This represents your campaign Id. For example: https://app.reachdesk.com/campaigns/117059/settings. The campaign Id is 117059.
3. Save this somewhere and make sure you know which campaign Id matches which image URL you want to appear.

5. Configure the image carousel HTML to use your images and campaigns

1. Edit your page and click on the existing image carousel.
2. You will see the HTML PROPERTIES on the right (in the Content tab). Click Expand.

3. Scroll down to the section that starts with "const CAROUSEL_IMAGES"

4. Each block represents an image that you need to link to a campaign. 

5. Update the following details in each block.

• campaignId: Use the campaign Id related to this image
• imagePublicURL: Use the image URL related to this image
• title: This is optional if you want the name of the gift to appear below the image
• description: This is optional if you want the description of the gift to appear below the title

6. If you want to add more images, copy the whole block that starts with "{ // Image 3"...}" and paste it below.

7. Close the HTML block. Save the page design. Save the landing page as a draft.

6. Configure whether to show dots or arrows to browse through the images

1. Scroll to this section of the HTML code

2. For SHOW_DOTS: Set true if you want to show dots below the image

3. For SHOW_ARROWS: Set true if you want to show arrows on the left and right of the images

Other customization options

How to update the colors of the arrows:

1. Select the image carousel and click expand to see the HTML code
2. Scroll down to this section of the code

3. Update "background" to be the hex code of the color you want to appear for the background left and right arrows.

4. Update "color" to be the hex code of the color you want to appear the actual arrows.

5. To update the color when the user is hovering over the arrows, about the "background-color" here.

How to update the colors of the dots

1. Select the image carousel and click expand to see the HTML code
2. Scroll down to this section of the code

3. Update the "background-color" in the .dot element to be the color of the dots when it's not selected.

4. Update the "bacground-color" in the .dot.selected element to be the color of the dots when it is selected.