Using custom widgets to display clickable images

This article describes how you can make your images 'clickable'.

Vishwas Prasad avatar
Written by Vishwas Prasad
Updated over a week ago

Links are vital to direct visitors and help them navigate a website with ease. To make your EngagementHQ site more versatile, you may include several links in Projects - for example to direct people to certain documents or tools - and to have links across projects to entice your visitors to engage in more than one project.

Links don’t necessarily have to be plain text but can be images too. Adding clickable images is a great way to include call to actions while at the same time adding colour and beauty to your project.

Take a look at this example on a current EngagementHQ site. Not only are there a range of buttons in the description, there is a beautiful clickable image in the widget space too.

As done in the example consider including clickable images in custom widgets to link from one project to another. 

Before you try the below HTML method, we'd recommend referring this article on uploading and simply hyperlinking the image to a link.

HTML code method:

To achieve this you need to use some basic HTML that you can copy below, paste into the source editor of your custom widget (see image below) and fill in the parts in the quotation marks. If you have never worked with HTML before, don’t sweat it, it is really quite simple:

<a href="insert destination URL here"><img src="insert image location here" title="insert title" alt="insert description here" width="700px"></a>

Replace the text in the quotation marks as below:

  • insert destination URL here: Replace this with the actual link, where you want to direct your visitors to when they click on the image.

  • insert image location here: Replace this with the location of the image you want to make clickable (hence ‘img src’. src stands for source). 

  • insert title: this is for accessibility - for e.g. people who use screen readers, hence we recommend as good practice to give the image a title.

  • insert description here: Replace this with an alternative description. This is also important for accessibility reasons as above.

  • width: The standard width of the Custom Widget in EngagementHQ is 450 pixels wide, but we recommend you load an image that is 700 pixels wide as this will accommodate the width of the image when it is upsized on a tablet view. The code specifies the width of the image at 700 pixels. You can always change this depending on your requirements.

Copy and paste this code, into the Content text box, after clicking on the <> icon in the editor. Click the Icon again to exit the code view and click Save & Close to save the changes.

Click Save & Close.

And that is all. Now you should have a clickable image in your custom widget. Click Preview and try it out. Contact our support team if you need any further assistance via chat or email support@engagementhq.com.

Please find details of the various file types that are compatible with EngagementHQ here .

Did this answer your question?