Widget Installation for Squarespace

This article discusses installation of the the Widget in the navigation bar on a Squarespace website. While the general install guidelines provided on the standard instruction page are relevant, this covers the details of working specifically with Squarespace.

Part 1) Add a Link in your Header

• Open you site editor
• Navigate to to the Pages area
• Add a Link to your main navigation. 
• Use your unique URL and set it to open externally – generally we suggest labeling this link as "Gift Cards".

Part 2a) Install Scripts

• Still in the editor, navigate to Settings > Advanced > Code Injection.
• Add the following to the Header area:

<!-- Its On Me widget styles and scripts -->
<link rel="stylesheet" type="text/css" href="https://www.itson.me/content/widget/widget-1.1.css">
<script type="text/javascript" src="https://www.itson.me/content/widget/widget-1.0.js"></script>

•  Add the following to the Footer area (note that you must replace highlighted values in this code block for it to function):

<!-- IOM scripts initialize - uses YUI library to find navigation link -->
<script type="text/javascript">
YUI().use('node', function(Y) {
     IOM.run();
     Y.one("<nav item selector>").on("click", function(e) {
          var widgetUrl = "<your unique url>";
          var widgetTitle = "Gift Cards at <venue name>";
          if (!IOM.open(widgetUrl, widgetTitle)) window.open(widgetUrl);
          e.preventDefault();
          e.stopPropagation();
          return false;
     });
});
</script>

Part 2b) Determine your Nav Item Selector

In order to determine your nav item selector, you will likely need to use your browser development tools to inspect the structure of your site's navigation section HTML. You use this structure to compose a CSS-styled selector that will uniquely identify the Gift Card anchor tag on your site.

Often, a nav item selector that works in the code above is:

      #mainNavigation .external a[target='_blank']

This could have multiple positive matches if using other external links in main navigation – which would need to be addressed on a case by case basis.

Also, not all themes use same main navigation layout, so this selector may not work for all Squarespace themes and would need to be determined on a case by case as well.

The ItsOnMe support team can help with these details.