Introductions widget - adding hyperlinks

@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!