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:
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. |
- 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" /> - Highlight the text or image which will hyperlink to your Content Track, and click the Hyperlink button to add the link.
- Enter the URL of the Content Track, and add the following query string to the end of the URL:&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.
Using HTML for a Text Link
- 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" /> - 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>
Using HTML for an Image Link
- 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>
- 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 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.