How to change the url of logo click

Ask the community
1

Below is a code snippet that allows to change the url of logo in the webapp/website. Simply replace the google url with your desired url.

<script>
    document.addEventListener("DOMContentLoaded", function () {   
        $('a.navbar-brand').attr('href', 'https://google.com');
    });
</script>
3 Likes
2

Is there a way for this to be done with specific user visible blocks? Ex. One version of the header would link to a particular site/page when clicking the logo, while another header would link to a different site/page.

1 Like
3

I’d appreciate this as well!

4

@Justin_JMP @rebeccajane

here is an example:

<script>
    document.addEventListener("DOMContentLoaded", function () {   
        $('#header-block-name1 a.navbar-brand').attr('href', 'https://google.com');
        $('#header-block-name2 a.navbar-brand').attr('href', 'https://yahoo.com');
    });
</script>

header-block-name1 and header-block-name2 are the block names you see in the studio block settings panel

2 Likes
5

Thanks for looking into this @artur! Can confirm it works exactly as intended :slight_smile:! Appreciate the help.

3 Likes
6

Don’t work for me:(

7

Hey @Korzhov_dm,

Where have you added the provided custom code?

8

yes, I’ve tried adding it to the head and it doesn’t work. After I added it to the body and result was the same.

9

@Korzhov_dm the one above is for old blocks.

Can you pls try this one ?

<script>
window.addEventListener('block-loaded-header1', () => {
	const detail = { link: 'https://google.com' };
	window.dispatchEvent(new CustomEvent('set-logo-link-header1', { detail }));
});
</script>

Where header1 is the name of your block visible in the block settings panel in the studio.

The code needs to be added page settings header custom code area.

1 Like
11

I need use it for 2 blocks:)

You log-in users and non-log-in

12

It works! Thank you so much!

1 Like
13

Is there a way to seperate this based on user group? I have a header for manager and a header for logged in in users.

14

Hi Erik,

This is the code to perform what you want

<script>
window.addEventListener('block-loaded-header1', () => {
	const detail = { link: 'https://yourdomain.com/path' };
	window.dispatchEvent(new CustomEvent('set-logo-link-header1', { detail }));
});

window.addEventListener('block-loaded-header2', () => {
	const detail = { link: 'https://yourdomain.com/path2' };
	window.dispatchEvent(new CustomEvent('set-logo-link-header2', { detail }));
});
</script>

header1 being used for non logged in user
header2 being used for logged in user

You can replicate this pattern if more headers

1 Like
15

Tried that but it only worked on the first header not the second :frowning:

17

Hi!

You need to insert the code in the header of the page/app settings, not in the footer, otherwise the part of the code related to the header for the logged in users won’t work

20

You wrote const details instead of detail. Same for { details } => no ‘s’

21

Worked! Tks a lot!

1 Like