Noble Implementation Guide

BASIC NOBLE SCRIPT

This is the basic Noble script template. If you use this template, it will place the widget on the upper right side of the page, roughly 120 pixels from the top (to account for your top navigation bar). There's code in the script to ensure that the widget does not display on mobile devices (we are working on a mobile-friendly version). The <iframe> script is what displays the Noble widget.

<script src="https://cdn.jsdelivr.net/gh/thatsnobleinc/noble-widget-tag@main/widget-tag.min.js"></script>
        <style>
          @media (max-width: 640px) {
            #nobleIframe {
              display: none;
            }
          }

          #nobleIframe {
            position: fixed;
            left: 0px;
            bottom: 0px;
            z-index: 2147483647 !important;
          }
        </style>
        <iframe src="https://app.thatsnoble.com/embed/[your_tenant_id] frameborder=0
          id="nobleIframe"></iframe>

You’ll replace [your_tenant_id] with the tenant ID provided to you - this is specific to your company and is a long alphanumeric string.

VARIABLES TO NOBLE SCRIPT

Changing the position from the left side to the right (while remaining at the top of the page)

Change the left: 0px; argument to right: 0px;

• If you want to add more or less padding, you can add pixels. For example, to push the widget further towards the middle of the page, add pixels (i.e. change left: 0px; to left: 50px; (or right: 0px; to left: 0px;) and play with the value to get it exactly where you want)

If you want the widget to nest further up or down the page, modify the top: 120px; argument. To move it up the page, reduce the pixels (i.e. top: 100px;). To push it down the page, add pixels (i.e. top: 160px;). You can also use negative numbers in these arguments to reduce padding even further.

‍

‍If you move the widget to the right side of the page, you’ll also want to change the arrow direction of it to correspond with the side of the page its on. To do this, you’ll add the widget-position query string parameter to the end of the widget URL in the script. For example:

“https://app.thatsnoble.com/embed/?tenant-id=[your_tenant_id]&widget-position=right”

Changing the position from the top of the page to the bottom

Change the top: 120px; to bottom: 0px;

• If you want to add more or less padding, you can add pixels. For example, to push the widget further up the page, add pixels (i.e. change bottom: 0px; to bottom 20px;). Negative pixels are not advised for this argument; however, if at 0px it’s not as far towards the bottom of the page as you’d like, you can try negative pixels.
• The widget will automatically expand in the appropriate direction based on the use of “top” vs “bottom”: if you are using “top” to control the widget position, it will expand downwards, and if you are using “bottom” it will expand upwards.

Adjusting the browser widths for when Noble is displayed

• In the first <script> there is an argument for the browser width (max-width: 640px). This setting will only show Noble if the browser width is >640px. You can adjust this setting and allow Noble on wider screens.
• Our default is 640px as this will hide it on most phones, even in landscape mode, and should show on most browser widths.
• You can play with this setting by increasing or decreasing the 640px value.

Table of variables and values:

IMPLEMENTING USING GOOGLE TAG MANAGER

The Noble widget can be implemented directly on page or via a tag manager like Google Tag Manager. To implement using GTM, use these instructions:

1. In your Workspace, go to Tags > New
2. Name the tag “Noble Script”
3. Click Tag Configuration and select Custom HTML
4. Paste in the script elements (from above) that you want to use. Remember to add the script element to hide on mobile (until we have a solution for mobile devices).
5. Click on Triggering
6. Select All Pages
   • If you want to only show Noble on certain pages or in certain circumstances, create a custom trigger and use that. If you need help with this, reach out to us on Slack.
7. Save the Tag and Submit the changes (or preview them if you’d like first)
8. Best practice is to implement Noble on a single, live, page that gets low traffic in order to ensure the placement is exactly how you want it and test it. Then update the trigger to All Pages or the subset of pages you want Noble to be live on.

IMPLEMENTING DIRECTLY ON-PAGE

If you don’t use a tag manager, you can easily implement Noble across your site or on specific pages. Use the same scripts and variables mentioned above, and add them just after the opening <head> tag. Alternatively, if you’re using a CMS like Webflow with custom script settings, it’s ok to have the Noble script just before the closing </head> tag.

TESTING AND OPTIMIZING

As mentioned above in the Google Tag Manager settings, it’s important to test Noble on a live page or two before pushing it across your site. Here are some recommendations.

• Use a tag manager or CMS to implement Noble on a live page with low traffic for testing both the functionality of the widget, as well as the placement.
  • If you have multiple different types of headers or footers or templates across your site, be sure to test the Noble placement across all of them before implementing broadly. You can also use a tag manager to do different placements for different page templates.
• Have several internal people try the widget flow so they can see the results and how it works. This will be helpful if you ask prospects to use it or if prospects have questions about it.

WHERE YOU SHOULD ADD NOBLE

In order to maximize exposure of Noble and give your prospects the best chance for an impactful word of mouth conversation with a happy customer they know, put Noble across as many pages as possible. Most Noble customers are placing it across their entire website. Those who don’t, often use Noble on key buying pages such as:

• Pricing
• Solutions/Product pages
• Conversion Thank You pages (i.e. demo request, content gates, registrations)
• Case Study pages
• Low funnel content pages

There are other ways to direct prospects to the Noble experience on your website as well:

• Implement the Noble Sales experience to have a custom URL to send prospects to (ask us about this if you’re not using it yet).
• Once a sales rep or SDR has a connection with a prospect via email/LinkedIn, offer the Noble experience to them before or after a demo request. Prospects are getting tired of the same old offers like content, events, demos, etc. - give them something new that will help drive them lower into the funnel.

Getting Help

We’re always here to help and just a Slack message or email away. If you have any questions about this guide, or how to implement Noble in a more custom way, don’t hesitate to message us in Slack or send an email to support@thatsnoble.com. We’ll reply usually within a few business hours - no longer than 1 business day.