Make picture clickable to button link

Ask the Community Customization
1

Is it possible to make the images in each pricing table clickable to the same link in the button? Especially on mobile, it will allow users to tap to the link much easier.

2 Likes
3

Hi there, @andrewchin :waving_hand:

Yep, it’s possible to do this! Please add this code to the Custom CSS field on the Appearance tab of your widget’s settings:

.es-picture {
	cursor: pointer;
}

And this script should be placed in the Custom JS field on the Appearance tab:

const LINK = 'https://google.com';

const waitForElements = (selector, root = document) =>
	new Promise((res) => {
		const observer = new MutationObserver(() => {
			const elements = root.querySelectorAll(selector);
			if (elements.length) {
				res(elements);
				observer.disconnect();
			}
		});

		observer.observe(root, { childList: true, subtree: true });
	});

waitForElements(
	'.elfsight-app-60e52683-43d5-422c-91b2-ebefd5ab8f72 .es-picture'
).then((pictures) => {
	pictures.forEach((picture) => {
		picture.addEventListener('click', () => {
			window.open(LINK, '_blank');
		});
	});
});

In the 1st line of the code, you should set your redirect URL:

image
image595×382 22.5 KB


Please try it out and let me know how it worked :wink:

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link

3 Likes
4

Thanks again for your help Max!

The pictures are now clickable, but I have a different link for each of the buttons (to each service page and anchored place). Would it be possible for each picture to be clickable to the button link instead of a fixed one?

Thank you!

2 Likes
5

Got you, thanks! I’ll discuss with the devs if it’s possible to achieve and will update you once I have their response :slightly_smiling_face:

2 Likes
6

Hi there, @andrewchin :waving_hand:

We’ve adjusted the script and saved it in your widget:

const waitForElements = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const elements = root.querySelectorAll(selector);
      if (elements.length) {
        res(elements);
        observer.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

waitForElements(
  '.elfsight-app-60e52683-43d5-422c-91b2-ebefd5ab8f72 .es-column-container'
).then((columns) => {
  columns.forEach((column) => {
    column.addEventListener('click', (event) => {
      if (!!event.target && event.target.closest('.es-picture-container')) {
        const learnMoreButton = column.querySelector('.es-button');

        learnMoreButton?.click();
      }
    });
  });
});

Please check your widget and let me know if you like how it’s working now :slightly_smiling_face:

3 Likes
7

Amazing, this is is perfect. Thank you so much!!

3 Likes
8

You’re so welcome! I’ll pass your kind words to Max when he gets back from a well-deserved vacation :palm_tree:

Please feel free to get back to us any time you need assistance.

1 Like