Embed a Content Track on your Website

Summary

PathFactory allows you to render your content tracks as an overlay on any webpage within your domain. This article explains:

  • What an overlay is
  • How to embed your content tracks into your website as an overlay
  • How to change the size of the overlay

What is an overlay?

An overlay embed allows web content to be displayed on top of a webpage, rather than navigating to another page or opening a new tab. The visitor clicks on a link on the web page to activate the overlay track.

Example

The gif below shows an overlay that we have on our https://www.pathfactory.com webpage:

image
Example of an overlay

How to Embed a PathFactory Content Track as an Overlay

Visitors must click on a link to open the overlay. This link can be a piece of text or an image.

Warning
If you’ve implemented Cookie Consent, you will need to ask visitors for cookie consent on any webpage on which you embed a content track.Add the following function to your webpage’s JavaScript: cookieResponse(true|false)Click here for more information on PathFactory’s Cookie Consent feature.
  1. Copy and paste the two lines of code below and place them within the tag of your webpage:
    <script src="https://cdn-app.pathfactory.com/libraries/overlay/overlay.js" async ></script> 
    <link href="https://cdn-app.pathfactory.com/libraries/overlay/overlay.css"rel="stylesheet" type="text/css" />
  2. Highlight the text or image which will hyperlink to your Content Track, and click the Hyperlink button to add the link.
  3. Enter the URL of the Content Track, and add the following query string to the end of the URL:&lb-mode=overlay

    Example

    If the URL for the Content Track you’re linking to is:

    https://pathfactorykb.lookbookhq.com/c/asset-name?x=content-track-ID

    The URL you would enter to hyperlink would be:

    https://pathfactorykb.lookbookhq.com/c/asset-name?x=content-track-ID&lb-mode=overlay

Using HTML to Overlay

If you prefer, you are also able to add a Content Track overlay to your website by editing the HTML.

  1. Copy and paste the two lines of code below and place them within the tag of your webpage.

    <script src="https://app.cdn.lookbookhq.com/libraries/overlay/overlay.js""></script>
    <link href="https://app.cdn.lookbookhq.com/libraries/overlay/overlay.css"" rel="stylesheet" type="text/css" />

  2. Copy and paste the code below and place it where you want the overlay link to appear on your webpage.
    • Replace the value “LOOKBOOK_URL_GOES_HERE” with the specific content track sharing link.
    • Replace the text “LINK TEXT GOES HERE” with the text you would like to show as a link on the webpage.
      <a href="#" data-lookbook-overlay-href="LOOKBOOK_URL_GOES_HERE">LINK TEXT GOES HERE </a>
  1. Copy and paste the two lines of code below and place them within the tag of your webpage:
    <script src="https://app.cdn.lookbookhq.com/libraries/overlay/
    overlay.js"></script> 
    <link href="https://app.cdn.lookbookhq.com/libraries/
    overlay/overlay.css" rel="stylesheet" type="text/css" 
    </script>
  2. Copy and paste the code below and place where you want the overlay link to appear on your webpage.
  • Replace the value “LOOKBOOK_URL_GOES_HERE” with the specific content track sharing link.
  • Replace the value “IMAGE_LINK_GOES_HERE” with the URL that you have for the image.
    <a href="#" data-lookbook-overlay-href="LOOKBOOK_URL_GOES_HERE"><img src="IMAGE_LINK_GOES_HERE" </a>

Customize the Overlay Design and Function

You have two additional ways to customize the design and function of the overlay.

First, you can change the background color of the X visitors click to close the overlay. Add the attribute data-lookbook-close-background-color=”COLOR” to the link. You can specify any valid CSS color.

For example, you would use the following code:

<a href="#" data-lookbook-close-background-color="green" 
data-lookbook-overlay-href="http://example.com">Link text</a>

Second, you can set the overlay to close if a visitor clicks anywhere outside of the overlay. Add the attribute data-lookbook-bg-click-close=true to the link element.

For example, you would use the following code:

<a href="#" data-lookbook-bg-click-close=true 
data-lookbook-overlay-href="http://example.com">Link text</a>

To use both attributes together, simply add them both to the link element. For example, you could use the following code:

<a href="#" data-lookbook-close-background-color="green" 
data-lookbook-bg-click-close=true data-lookbook-overlay-href="http://example.com">Link text</a>

FAQ

Will I still get engagement data if I use a website overlay?

Yes, visitor engagement with PathFactory overlay links is tracked the same way as any other engagement with content tracks.

Views: 48

Updated on June 11, 2024

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
CONTACT SUPPORT