@Scott Baldwin I can help you here I think.

There are 2 main ways to tackle this:

1. Use a script to manipulate the content of that section of the page: It has the benefit that you are not touching a native widget built and maintained by InSided, but this is not super elegant.
2. Copy the code of the widget they created and re-purpose it the way you want: I would opt for this as it feels cleaner, but of course it means it is on you to maintain the code should other things change…

The way I would tackle it (option 2) would be by copying the existing code for that section:

<div class="homepage-widget-container widget-container homepage-widget-container--introduction_bar widget-container--introduction_bar homepage-widget-container--introduction_bar widget-container--introduction_bar homepage-widget-container--index-5 widget-container--index-5" data-idx="5">
                <div class="widget-placeholder">
                                    <div data-preact="widget-introduction-bar/index" class="" data-props="{&quot;phrases&quot;:{&quot;Forum&quot;:{&quot;branded.cta.intro.first&quot;:&quot;Find answers to your questions&quot;,&quot;branded.cta.intro.second&quot;:&quot;Stay up to date on the latest topics&quot;,&quot;branded.cta.intro.third&quot;:&quot;Ask questions and help others&quot;,&quot;Ask your question&quot;:&quot;Ask your question&quot;}}}"><section class="full-width Template-brand-cta is-transition--height custom-intro-bar" data-component="close-element" data-data="{&quot;storageName&quot;:&quot;close--widget-cta&quot;,&quot;parent&quot;:&quot;.Template-brand-cta&quot;}"><div class="cta-widget qa-cta-widget"><div class="sitewidth"><span class="icon icon--cross icon--auto-width close js-close--element" aria-hidden="true"></span><div class="col"><div class="box widget widget--cta"><div class="box__content box__pad"><ul class="list list--float"><li class="list__item"><span class="icon icon--replace icon--round icon--checkmark" aria-hidden="true"></span><div class="list--label"><span>Find answers to your questions</span></div></li><li class="list__item"><span class="icon icon--replace icon--round icon--checkmark" aria-hidden="true"></span><div class="list--label"><span>Stay up to date on the latest topics</span></div></li><li class="list__item"><span class="icon icon--replace icon--round icon--checkmark" aria-hidden="true"></span><div class="list--label"><span>Ask questions and help others</span></div></li></ul><a href="/topic/new" data-track="{&quot;trigger&quot;:&quot;widget&quot;,&quot;type&quot;:&quot;Topic Initiated&quot;}" data-ga-track="{&quot;eventCategory&quot;:&quot;Homepage&quot;,&quot;eventAction&quot;:&quot;Create topic clicked&quot;,&quot;eventLabel&quot;:{&quot;Position&quot;:&quot;Introduction widget&quot;}}" class="btn--cta btn--new-topic qa-topic-new-button">Ask your question</a></div></div>                        </div></div></div></section></div>
                                </div>
            </div>

Then I’d add an HTML Widget without title in which I paste that same code:

Then I would proceed to add the links I want to have appear in that section, and remove the extra space of the html widget so that it looks exactly like the original one:

The code would the look something like this:

<div id="noobContent" style="margin-top: -35px !important;" class="homepage-widget-container widget-container homepage-widget-container--introduction_bar widget-container--introduction_bar homepage-widget-container--introduction_bar widget-container--introduction_bar homepage-widget-container--index-5 widget-container--index-5" data-idx="5">
 <div class="widget-placeholder">
 <div data-preact="widget-introduction-bar/index" class="" data-props="{&quot;phrases&quot;:{&quot;Forum&quot;:{&quot;branded.cta.intro.first&quot;:&quot;Find answers to your questions&quot;,&quot;branded.cta.intro.second&quot;:&quot;Stay up to date on the latest topics&quot;,&quot;branded.cta.intro.third&quot;:&quot;Ask questions and help others&quot;,&quot;Ask your question&quot;:&quot;Ask your question&quot;}}}"><section class="full-width Template-brand-cta is-transition--height custom-intro-bar" data-component="close-element" data-data="{&quot;storageName&quot;:&quot;close--widget-cta&quot;,&quot;parent&quot;:&quot;.Template-brand-cta&quot;}"><div class="cta-widget qa-cta-widget"><div class="sitewidth"><span class="icon icon--cross icon--auto-width close js-close--element" aria-hidden="true"></span><div class="col"><div class="box widget widget--cta"><div class="box__content box__pad"><ul class="list list--float"><li class="list__item"><span class="icon icon--replace icon--round icon--checkmark" aria-hidden="true"></span><div class="list--label"><span><a style="color: inherit;" href="http://www.google.com">Find answers to your questions</a></span></div></li><li class="list__item"><span class="icon icon--replace icon--round icon--checkmark" aria-hidden="true"></span><div class="list--label"><span>Stay up to date on the latest topics</span></div></li><li class="list__item"><span class="icon icon--replace icon--round icon--checkmark" aria-hidden="true"></span><div class="list--label"><span>Ask questions and help others</span></div></li></ul><a href="/topic/new" data-track="{&quot;trigger&quot;:&quot;widget&quot;,&quot;type&quot;:&quot;Topic Initiated&quot;}" data-ga-track="{&quot;eventCategory&quot;:&quot;Homepage&quot;,&quot;eventAction&quot;:&quot;Create topic clicked&quot;,&quot;eventLabel&quot;:{&quot;Position&quot;:&quot;Introduction widget&quot;}}" class="btn--cta btn--new-topic qa-topic-new-button">Ask your question</a></div></div> </div></div></div></section></div>
 </div>
 </div>

Edits:

• Adding style="margin-top: -35px !important;" in the first div element
• Adding <a style="color: inherit;" href="http://www.google.com">Find answers to your questions</a> to the first bullet-point text, making it a link with the “a” element but not changing the appearance of it by adding the color style inherit. (Remove the style to make it look like a standard link from your site).

Obviously you can then remove the original Introduction Widget and set the url in the code to whatever you want and follow the same logic for the other bullet-points as needed. Note: If you are pointing outside of your community then you can add target="_blank" in the “a” element in order for the link to open in a new tab.

BTW for extra points… (Based on the screen-grab you shared). Now this is a custom HTML widget you could even add an ID to the initial div element like “noobContent” and then have the content disappear for more advanced members based on rank for example.

<script>
  var noobSidebarElement = document.getElementById("noobContent");
  if (inSidedData.user.rank !== "RANKHERE") {
    noobSidebarElement.setAttribute('style', 'display:none;'); } 
  }
</script>

Just put this code into the last box on the Third Party Script page after adding the rank number you want to display this to in the rule where it says RANKHERE. and boom!

Hope this helps!

Many thanks @SmartlyGreg 

We have done this with HTML. So instead of:

• Hello and welcome

your phrase says:

• <a href=”�targetURL]”>Hello and welcome</a>

@bjoern_schulze thanks for the reply. We tried that and kept running into two issues earlier (hence the question). But I gave it another try today (else was going to take @SmartlyGreg’s path) and it worked. Two caveats I’ll share:

1. the markup sometimes is converted into entities and then doesn’t work. Not sure why, but I tried again today and it now works.
2. the content of the three phrases, when you change them into links, causes the third item to get pushed out resulting in no way to update the phrase. I worked around this today by starting with the third and making my way to the first as a workaround.

It’s now working on our site:
 

@Scott Baldwin @bjoern_schulze  the simplest answer is often the best! That is indeed a great solution!

With regards to not being able to edit the phrase I think you will find - at least it was my experience - that if you go to Control > Customisation > Phrases that all the HTML edits you make from there support HTML while editing from the front end by turning on the Phrases toggle is actually less consistent, and often display the code you wrote instead of it being properly interpreted as code. This should help if you need to make edits to this!

Hey @SmartlyGreg 

I’m also looking to edit the hyper links on the introduction bar. I’ve added the code here, but I cannot get it down the page (where the current bar is) it is staying at the top if I put the script in the head, and at the bottom if I put the script under the body. Any suggestions what I’m doing wrong here?

I love this thread about seizing another ‘Onboarding’ opportunity.

Have you thought about proposing this as an OOTB option for the widget, like the Featured content or announcement widgets @Scott Baldwin ?

@racheal.mayer you can update them using phrases. If you can’t do it via the front-end, this is the backend details (which ours as an example)
 

@anirbandutta no plans to add an idea for this, my needs are met with the phrases.

@SmartlyGreg Would you or anyone following this thread be available to help me work out why my text is not hyperlinking? I updated the HTML widget and phrases in control, but the individual text of “Update your profile” “introduce yourself” and “Rank up by answering questions and chatting with peers” does not link out to the areas I indicated in phrases. 

Hey @security_lion - were you able to get your CTAs hyperlinked? I’m looking to hyperlink and underline. I thought I had working well but when someone else tests, it does not take them anywhere.

@cclements I was not able to