1. Home
  2. Modules
  3. Campaign Tools
  4. Website Campaigns
  5. Embed a Content Track on your Website

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.

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

image


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://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. 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.
  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 HEREa>
  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 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>

Change the Size of the Overlay

By default, the PathFactory Overlay is set to take up 80% of the webpage’s height and width where the overlay link is placed, but you are able to change the size of your overlays.
The way you adjust the Overlay?s size depends on the method with which you added the overlay.

Change Overlay Size with Query String

If you used the Query String method to add an Overlay to your webpage, you can change the size by adding and editing the following parameters:

Set Size with Percentage of Webpage Size
If you want the overlay to cover a certain percentage of the webpage, replace “95” with the width and/or height you want to set:
?lb-mode=overlay&lb-width=95%25&lb-height=95%25

Set Size with Pixel Count
If you want to set the overlay to a specific size, replace “900” and “450” with the width and/or height you want to set:
?lb-mode=overlay&lb-width=900px&lb-height=450px

Change Overlay Size with HTML

If you want to adjust how much space the overlay will take up on the webpage, you can use the data-lookbook-overlay-width and data-lookbook-overlay-height attributes. The values that can be used are any valid width unit, such as 90% or 800px.

<a href="#" data-lookbook-overlay-href="LOOKBOOK_URL_GOES_HERE" data-lookbook-overlay-width="95%" data-lookbook-overlay-height="95%">LINK TEXT GOES HEREa>

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:

Link text

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:

Link text

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

Link text


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.

Updated on August 3, 2022

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