How to create clickable image in Salesforce

In this Salesforce tutorial, we will learn how to create a clickable image in Salesforce. Additionally, we will go over how to use Salesforce Lightning and Salesforce Classic to create a clickable image.

While working in an organization that uses Salesforce, I got a task to use the company logo as a navigation tool. So for this, I create a clickable image in Salesforce.

If you want to learn how to make an image clickable in Salesforce Lightning and the Salesforce Classic component, you have come to the right place.

The following are the topics that we will cover in this salesforce tutorial:

• Clickable Image in Salesforce
• How to create clickable image in Lightning Component
• How to create clickable image in Classic Component

Clickable Image in Salesforce

In Salesforce, clickable images are referred to the images that can be clicked and interactive. It allows users to access or perform certain functionalities when we click on it, such as navigating to a specific page.

They can be used for various purposes such as navigation to a specific page, highlighting additional or important information, customizing the look, company or product branding, etc.

Salesforce creates the clickable images by uploading an image and creating it as a HYPERLINK to make the image clickable. It provides several benefits such as improved user experience, increase engagement, make more interactive, etc.

With this, we have understood clickable images in Salesforce with their use cases and benefits. Now, we will move ahead and learn to create clickable images in Salesforce Lightning Component.

How to create clickable image in Lightning Component

Here, are the steps to create clickable image in Salesforce Lightning Component.

Step 1: Log in to Salesforce Lightning mode, navigate to the right corner of the page, click on the gear icon (⚙), and from the dropdown menu (⬇) select “Setup”.

Step 2: To add a clickable image in Lightning Component. Search for “Email Templates” in the Quick Find search box and select “Classic Email Templates”.

Step 3: Click on the “New Template” button.

Step 4: Check the radio button to choose the type of email template “HTML (using classic Letterhead)”.

Step 5: To proceed, click on the “Next” button.

Note: If you are the first time creating the Letterhead proceed from Step 6. Otherwise, directly jump to Step 13.

Step 6: If you are creating the Letterhead for the first time, you need to activate it first. For this, click on the “Go to Letterhead” link.

Step 7: Then to proceed, click on the “Next” button.

Step 8: Click on “New Letterhead” to create a letterhead.

Step 9: Enter the “Letterhead Label” and the “Letterhead Unique Name” is deployed automatically. Here, I create “Product Launch”.

Step 10: Now to make it “Available For Use” check the checkbox.

Step 11: In addition, we can also add the “Description” if we want. Then, to save click on “Save”.

Step 12: Now, set the design of the letterhead according to your choice. And proceed with the “Next” button.

Step 13: Enter the “Email Template Name” and the “Template Unique Name” is deployed automatically. Here, I enter the email template name “Course Launch”.

Step 14: Select the “Classic Letterhead” from the dropdown menu. Here, I select “Product Launch”.

Step 15: Then, select the “Email Layout” from the dropdown menu. Here, I select the “Free Form Letter”. Also, select “Encoding” as per your choice from the dropdown.

Step 16: If you want to add a “Description” and “Subject”, you can add them otherwise you can leave them blank.

Step 17: Now, to proceed click the “Next” button.

Step 18: Enter the “Subject” related to your email content. Here, I enter the subject “New Course Launch Promotion”.

Step 19: In “HTML Email Content”, click on the “Email Body” and type the message. If we want to add any field, we can add it from the “Available Merge Fields”.

Step 20: Now, add the text related to the clickable image. Select the text and click on “Insert a Link”.

Step 21: The pop-up window shows on the screen, fill up the link of the page on which we want to render.

Step 22: Click on the “OK” button.

Step 23: Now, click on the “Insert an Image” option in formatting Controls.

Step 24: Select the image that you want to upload. Make sure the image must store in the “Personal Documents” already.

Step 25: Click on the “Next” button to proceed.

Step 26: Then, click on the “Save” button to save the clickable image in the Salesforce Lightning component.

Step 27: When we click on the clickable image, we will redirect to the website whose link we have provided.

With this, we have learned how to create a clickable image in the Salesforce Lightning component. Now, we will move ahead and learn to create the clickable image in the Classic component.

How to create clickable image in Classic Component

Here, are the steps to create clickable image in Salesforce Classic Component.

Step 1: First, we need to log in to Salesforce Classic. For this, click on “Avatar” and select “Switch to Salesforce Classic”.

Step 2: On the upper right-hand side of the corner, click on “Setup”.

Step 3: In the setup menu, search for the email template and then click on “Email Templates” under the “Communication Templates” section.

Step 4: Create a new email template by clicking on the “New Template” button.

Step 3: Check the radio button to choose the type of email template “HTML (using classic Letterhead)”.

Step 4: To proceed, click on the “Next” button.

Step 5: Select the “Folder” from the dropdown in which we want to save the email template. Here, I select the “Unfiled Public Classic Email Templates”.

Step 6: Check the checkbox “Available For Use”, if we want to use this email template.

Step 7: Enter the “Email Template Name” and the “Template Unique Name” is deployed automatically. Here, I enter the email template name “Website Launch”.

Step 8: Select the “Classic Letterhead” from the dropdown menu. Here, I select “Product Launch”.

Step 9: Then, select “Email Layout” from the dropdown menu. Here, I select the “Free Form Letter”. Also, select “Encoding” as per your choice from the dropdown.

Step 10: Add the “Description” and “Subject” if you’d like, or leave them empty otherwise.

Step 11: Enter the “Subject” for the subject of the email we are sending. Here, I enter the subject as “Website Launch”.

Step 12: Click on “Click here to enter content” under “HTML Email Content” and enter the message. We can add any field from the “Available Merge Fields” if we want to.

Step 13: Add the text that goes with the clicked image. Click “Insert a Link” after selecting the text.

Step 14: Click on the “OK” button to proceed.

Step 15: In the formatting controls, click the “Insert an Image” option.

Step 16: Choose the image we want to upload. Make sure the image is already stored in the “Personal Documents” folder.

Read: How to upload to “My Personal Documents” in Salesforce

Step 17: To continue on, click the “Next” button.

Step 18: In order to save the clickable picture in the Salesforce Classic component, proceed by clicking the “Save” button.

Step 19: When we click on the clickable image, we will redirect to the website whose link we have provided.

As a result, we now know how to create an image clickable in the Salesforce Classic component.

Conclusion

With this, we have learned about clickable image in Salesforce with their various purposes.

In addition, we have learned the procedure of creating a clickable image in the Salesforce Lightning Component and the Salesforce Classic Component.

In addition to this, the following are the topics that we have discussed:

• Clickable Image in Salesforce
• How to create clickable image in Lightning Component
• How to create clickable image in Classic Component

You may also like to read:

• Add Image to Classic Email Template in Salesforce Classic
• Add image to email template in Salesforce Lightning
• How to Add Login Button for User in Salesforce
• How to upload files in Salesforce