Jump to content

Add widget to site navigation

Recommended Posts

Site URL: https://www.weareenough.com.au/

I need to add a gift card widget to a websites navigation. 
 
I've added a circle to a screenshot of where I need it to sit. (or at least somewhere in the navigation area). 
 
This is the code I've been provided but it simply doesn't work when I follow the instructions. Is anyone able to assist? 

<!––Place this script into your webpage's head section.––>
<script 
    type="application/javascript"
    async
    id ="sc-widget_launcher"
    src="
https://d19ujuohqco9tx.cloudfront.net/ols-prod-giftcard-ui/widget-injector/sc-widget-launcher.js
    data-ruleset_id="6364" 
    data-currency_code="AUD" 
    data-activation_option="3"
    data-widget_label="Gift vouchers" 
    data-liable_site_id="40369"
    data-popup_width="480"
    data-popup_height="840"
    data-host="
https://d19ujuohqco9tx.cloudfront.net/ols-prod-giftcard-ui"
></script>

<!––Place this button or link into your webpage's body where you want the widget launcher to display.––>
<input id="sc-widget_launcher_button" type="button" value="Purchase giftcard!" onclick="launchShortcutsWidget();">
<a id="sc-widget_launcher_link" href="#" onclick="launchShortcutsWidget();">Purchase giftcard!</a>

Screen Shot 2021-10-26 at 12.52.39 pm.png

Link to comment

What is the widget provider

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Add this into Settings->Advanced->Code Injection->Footer

<script>
  (function() {
  	const headerCta = document.querySelectorAll('.header-actions-action--cta, .header-menu-cta');
headerCta.forEach((item) => {
        item.insertAdjacentHTML('afterbegin', `<a id="sc-widget_launcher_link" class="btn btn--border theme-btn--primary-inverse" href="https://enoughstudio.mylocalsalon.com/onlinebooking/v7410/Steps/SelectServices.aspx" target="_blank" onclick="launchShortcutsWidget();">Purchase giftcard!</a>`)
    });
  })()
</script>
<script 
    type="application/javascript"
    async
    id ="sc-widget_launcher"
    src="https://d19ujuohqco9tx.cloudfront.net/ols-prod-giftcard-ui/widget-injector/sc-widget-launcher.js" 
    data-ruleset_id="6364" 
    data-currency_code="AUD" 
    data-activation_option="3"
    data-widget_label="Gift vouchers" 
    data-liable_site_id="40369"
    data-popup_width="480"
    data-popup_height="840"
    data-host="https://d19ujuohqco9tx.cloudfront.net/ols-prod-giftcard-ui"
></script>

image.thumb.png.1bc37b05170940bf597b68934710f170.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.