Question

Link to a specific widget on a page

  • 9 September 2022
  • 11 replies
  • 215 views

Userlevel 5
Badge +2

I was wondering if it was possible to create a link that goes to a specific widget on a page?

 

For example if you are at the top of the page you could click a button and it would take you to the correct section on the page. We have html blocks so in theory I could make a button I’m just not sure how to get the link or if it’s even possible.


11 replies

Userlevel 2

Hi Lucy, thank for posting. I was also wondering how to do exactly the same thing having played around unsuccessfully with anchor tags! Did you manage to crack it?

 

I’m tagging in @Bfarkas and @gstager to see if they can help as they’ve been enormously helpful in helping me as a new starter in all of this.

Userlevel 5
Badge +2

Hi @James A 

No I didn’t figure it out in the end despite a lot of attempts. I’m not a coder by trade so the tips were all picked up online and didn’t work. Docebo stripped all the tags I tried to put in.

Userlevel 7
Badge +3

Just simple ID linking should work. Every widget has a unique ID, so if you add that to the end of your link: www.mywebaddress.com#widget-id-here

It should jump you. There’s a couple of gotchas to be aware of:

  • If you have SSO turned on, the URL structure for native vs. not is a bit diff so if you use relative links can cause issues.
  • If within an iframe, gets weirder.
  • These jumps sometimes line you up differently than you expect, and sometimes its better to jump to the bottom of the previous widget to get the view you want.
  • Widget IDs change page to page, and if you change the row layout and sometimes when you move the widget around the page.

Theres info on the widget ID here: (Note they are using subheading IDs to do the page jumps here too!)
https://help.docebo.com/hc/en-us/articles/360020080720-Introduction-to-Pages-and-Menus#subtitle-5

Userlevel 2

Thanks @Bfarkas  - I found simply popping in “#doc-widget-id” (where “ID” is the widget id number) at the end of a relative link worked absolutely fine. For reference (and completeness) below is the exact html code I’m now using for “testpage2” of my platform:

a href="/pages/239/testpage2#doc-widget-3822" 

@Lucy.blake  - hope this solves your problem and thanks again to @Bfarkas.

 

Userlevel 7
Badge +3

Thanks @Bfarkas  - I found simply popping in “#doc-widget-id” (where “ID” is the widget id number) at the end of a relative link worked absolutely fine. For reference (and completeness) below is the exact html code I’m now using for “testpage2” of my platform:

a href="/pages/239/testpage2#doc-widget-3822" 

@Lucy.blake  - hope this solves your problem and thanks again to @Bfarkas.

 

Yup it should, just beware of the potential conflicts I warned of, they will get ya! :)

Userlevel 2

It’s been a while since I’ve posted but had a follow-up to the above thread….

 

@Bfarkas using the “#doc-widget-id” (as shown above) at the end of the URL works/links perfectly if already on that page. However, if I want to link to a specific widget/section of a different page (using the same technique above), to the one I’m already on, the URL link simply takes me to the top of the other page and not the specific widget. Is there any way around this so that our uses can comfortably navigate to targeted areas of pages across the whole platform rather than just working for the page they are already on? Thanks

@James A Are your links currently working. Mine have worked for a long time and recently the link is resolving to %23doc-widget etc.  instead of #doc-widget etc. 

 

 

Userlevel 7
Badge +3

Yeah they seem to have made a change which encodes the # into its url encoded equivalent, %23, which breaks this common website technique.

Just simple ID linking should work. Every widget has a unique ID, so if you add that to the end of your link: www.mywebaddress.com#widget-id-here

It should jump you. There’s a couple of gotchas to be aware of:

  • If you have SSO turned on, the URL structure for native vs. not is a bit diff so if you use relative links can cause issues.
  • If within an iframe, gets weirder.
  • These jumps sometimes line you up differently than you expect, and sometimes its better to jump to the bottom of the previous widget to get the view you want.
  • Widget IDs change page to page, and if you change the row layout and sometimes when you move the widget around the page.

Theres info on the widget ID here: (Note they are using subheading IDs to do the page jumps here too!)
https://help.docebo.com/hc/en-us/articles/360020080720-Introduction-to-Pages-and-Menus#subtitle-5

 

@kamcorn @James A @Lucy.blake I’m trying to do this same thing, but I don’t know where to find the numerical widget ID. Where can I find that? I tried to inspect the code and didn’t see anything that says Widget ID. 

It is broken for now so the widget ID doesn’t work either. I found the widget iD through the inspect, using the focus and it is a line or 2 above the focus.

Userlevel 7
Badge +3

As mentioned a recent update has broken this from working which is a shame, I made a quick idea for those who use it to support:

 

Reply