Perkswall

Perkswall Integration Page

14min

Overview
The latest version of the Perkswall Integration Page simplifies the way you manage and customize your Perkswall settings. This dashboard gives you full control over various aspects of your Perkswall, including:
Styling: Customize the appearance to match your brand.
Settings: Fine-tune control options, including advanced configurations.
Previews: Instantly view how your Perkswall will look on both mobile and desktop devices.
With this enhanced version, managing your Perkswall is easier and more intuitive, ensuring a seamless experience for both you and your customers.
Navigation
Accessing the Perkswall Integration Page is simple, just by clicking here or navigate from your dashboard by following these steps:
Click on "Integration" in the left sidebar of the dashboard.
Then, click on "Perkswall".
You'll now find yourself on the Perkswall Integration Page, where you can begin customizing your Perkswall to suit your needs.
Perkswall Settings
General Settings
Favicon: Upload your brand’s favicon (16x16 pixels) to personalize your Perkswall. The favicon will appear in the browser tab when users visit your Perkswall. If you don't upload a favicon, the default MomentScience logo will be used instead. 
Favicon
﻿
Logo: Upload your company’s logo to be displayed in the header of your Perkswall page. Ensure that the logo is a square image for optimal display. 
﻿
﻿
﻿Style Settings﻿
Customize the appearance of your Perkswall header with one of the following options:
Light: Keeps the header background in the default light theme of Perkswall.
﻿
Image: Upload a custom header image. For the best display, ensure the image matches the recommended dimensions of 1440x130 px. 
﻿
Color: Set a solid background color for the header. You can either enter a HEX code or select a color from the palette. 
﻿
﻿Custom: You can fully customize the Perkswall header, allowing you to adjust the layout and appearance of key elements, such as the logo, header text, and the overall container style. This customization utilizes JavaScript for dynamic behavior and element manipulation, CSS for styling, and HTML for the foundational structure.
Selector Name
Description
#adpx_pub-image-container
Div container for the Publisher Logo image.
#adpx_perkswall-headerContainer
Div container for the entire header.
#adpx_mini-desc
Div containing the header text.
Sample Code Snippt
// Access the logo container (Publisher Logo image)
const logoContainer = document.getElementById('adpx_pub-image-container');

// Create and append a "Sponsored By:" message inside the logo container
const sponsorMessage = document.createElement('div');
sponsorMessage.innerText = 'Sponsored By:';
logoContainer.appendChild(sponsorMessage);

// Set the layout to display content in reverse order (row-reverse)
logoContainer.style.flexDirection = 'row-reverse';

// Access the header container (entire header section)
const headerContainer = document.getElementById('adpx_perkswall-headerContainer');

// Modify the header container layout and alignment
headerContainer.style.flexDirection = 'column-reverse';  // Reverse column order
headerContainer.style.alignItems = 'flex-start';         // Align items to the left
headerContainer.style.backgroundColor = 'white';         // Set background color to white
headerContainer.style.padding = '0';                     // Remove padding

// Access the header text container
const headerTextContainer = document.getElementById('adpx_mini-desc');

// Customize the header text container styling
headerTextContainer.style.width = '100%';                // Set full width
headerTextContainer.style.textAlign = 'left';            // Align text to the left
headerTextContainer.style.backgroundColor = '#6e9eda';   // Set background color
headerTextContainer.style.padding = '12px';              // Add padding

// Create and append a new <span> with a nested <a> tag inside the header text container
const newSpan = document.createElement('span');
const newLink = document.createElement('a');
newSpan.appendChild(newLink);
headerTextContainer.appendChild(newSpan);

// Access the logo container (Publisher Logo image)
const logoContainer = document.getElementById('adpx_pub-image-container');

// Create and append a "Sponsored By:" message inside the logo container
const sponsorMessage = document.createElement('div');
sponsorMessage.innerText = 'Sponsored By:';
logoContainer.appendChild(sponsorMessage);

// Set the layout to display content in reverse order (row-reverse)
logoContainer.style.flexDirection = 'row-reverse';

// Access the header container (entire header section)
const headerContainer = document.getElementById('adpx_perkswall-headerContainer');

// Modify the header container layout and alignment
headerContainer.style.flexDirection = 'column-reverse';  // Reverse column order
headerContainer.style.alignItems = 'flex-start';         // Align items to the left
headerContainer.style.backgroundColor = 'white';         // Set background color to white
headerContainer.style.padding = '0';                     // Remove padding

// Access the header text container
const headerTextContainer = document.getElementById('adpx_mini-desc');

// Customize the header text container styling
headerTextContainer.style.width = '100%';                // Set full width
headerTextContainer.style.textAlign = 'left';            // Align text to the left
headerTextContainer.style.backgroundColor = '#6e9eda';   // Set background color
headerTextContainer.style.padding = '12px';              // Add padding

// Create and append a new <span> with a nested <a> tag inside the header text container
const newSpan = document.createElement('span');
const newLink = document.createElement('a');
newSpan.appendChild(newLink);
headerTextContainer.appendChild(newSpan);
﻿
﻿
Text Style
Setting Name
Default Value
Description
Font Family
inter
This setting allows you to select a preset font for the Perkswall page. The available options are as follows:
Roboto
Open Sans
Monospace
Open Sans
Monospace
Sans-serif
Serif
Description Text Size
12px
Set a custom size for the Perkswall Offer description text.
Title Text Size
16px
Set the size for the Offer title text. 
CTA Text Size
16px
Set the size of the text within the call-to-action button. 
PerksWallet CTA Text Size
12px
Adjust the size for the PerksWallet call-to-action text. The PerksWallet allows users to save Offers to their virtual wallet for later use, enabling them to easily access and claim their Offers anytime.
For more information, see the PerksWallet FAQ.
Tile Styles
Setting Name
Default Value
Description
Tile Content Alignment
Left
Sets the alignment of the content within each tile.
Button Background Color
#155EEF12
Set the button background color for the Offer tile using a hex code or select from the color palette.
Button Text Color
#155EEF
Set the button text color for the Offer tile using a hex code or select from the color palette.
Button Hover Color
#155EEF2B
Set the button hover color for the Offer tile using a hex code or select from the color palette.
Button Stroke Color
#1C64F2
Set the button stroke color for the Offer tile using a hex code or select from the color palette.
Tile Radius
16px
﻿Set the corner radius for each Offer tile in pixels (px).
Border Thickness Size
1px
Set the border thickness of the Offer tile (in px).
Tile Background Color
#ffffff
Set the background color of individual Offer tiles using a hex code or select from the color palette.
Tile Border Color
#EAECF0
Set the border color of individual Offer tiles using a hex code or select from the color palette.
Tile Background Hover Color
#ffffff
Set the hover background color of individual Offer tiles using a hex code or select from the color palette.
Button Radius
8px
﻿Set the corner radius for the Perkswall CTA button in pixels (px) 
Perkswall Background Color
#ffffff
Set the background color of the Perkswall page using a hex code or select from the color palette.
PerkWallet CTA Color
#101828
Set the background color of the PerksWallet button using a hex code. This allows users to save Offers to their wallet for later use.
For more information, see the PerksWallet FAQ.
PerkWallet CTA Hover Color
#F44336
Set the hover background color for the PerksWallet button using a hex code or select from the color palette.
For more information, see the PerksWallet FAQ.
Theme Settings
Setting Name
Default Value
Description
Logo URL
None
Set the URL for the Perkswall logo. It serves as a hyperlink to your website when clicked on the logo.
Title Text
"You unlocked more exclusive offers."
Set customizable text that is displayed in the Perkswall header.
Offer Count
12
Set the initial number of Offers to display when the Perkswall is loaded.
Auto Show
Enabled
When enabled, more Offers are automatically loaded as the user scrolls down the page. When disabled, a "Show more" button appears at the end of the page to manually load more Offers.
Show Logo
Enabled
When enabled, your logo will be displayed in the header of the Perkswall. This logo can be set in the "General Settings" section or from the configuration settings within the dashboard.
Show Image
Enabled
When enabled, it displays each Offer's image in the Perkswall.
Show Header
Enabled
When enabled, it shows the header of Perkswall. You can specify the header appearance from the "Style Settings" section.
3D Tiles
Disabled
When enabled, it displays a 3D look for tiles.
Show Intermediate
Disabled
By default, this option is disabled, but you can choose from the dropdown. 
Selecting Modal (takes 60% of the screen) Interstitial (takes 90% of the screen) will show an intermediate screen when clicking on an Offer in Perkswall.
Advance Settings
Setting Name
Default Value
Description
Custom Code before </Head> Tag
None
Add custom JavaScript code inside the Perkswall head tag. This code executes during the document's loading phase before the page's content is displayed to the user.
Custom Code before </Body> Tag
None
Add custom javascript code inside the Perkswall body tag, placing code here ensures that the page's HTML content is fully loaded before the scripts are executed
﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at [email protected] 

Selector Name	Description
#adpx_pub-image-container	Div container for the Publisher Logo image.
#adpx_perkswall-headerContainer	Div container for the entire header.
#adpx_mini-desc	Div containing the header text.

Setting Name	Default Value	Description
Font Family	inter	This setting allows you to select a preset font for the Perkswall page. The available options are as follows: Roboto Open Sans Monospace Open Sans Monospace Sans-serif Serif
Description Text Size	12px	Set a custom size for the Perkswall Offer description text.
Title Text Size	16px	Set the size for the Offer title text.
CTA Text Size	16px	Set the size of the text within the call-to-action button.
PerksWallet CTA Text Size	12px	Adjust the size for the PerksWallet call-to-action text. The PerksWallet allows users to save Offers to their virtual wallet for later use, enabling them to easily access and claim their Offers anytime. For more information, see the PerksWallet FAQ.

Setting Name	Default Value	Description
Tile Content Alignment	Left	Sets the alignment of the content within each tile.
Button Background Color	#155EEF12	Set the button background color for the Offer tile using a hex code or select from the color palette.
Button Text Color	#155EEF	Set the button text color for the Offer tile using a hex code or select from the color palette.
Button Hover Color	#155EEF2B	Set the button hover color for the Offer tile using a hex code or select from the color palette.
Button Stroke Color	#1C64F2	Set the button stroke color for the Offer tile using a hex code or select from the color palette.
Tile Radius	16px	Set the corner radius for each Offer tile in pixels (px).
Border Thickness Size	1px	Set the border thickness of the Offer tile (in px).
Tile Background Color	#ffffff	Set the background color of individual Offer tiles using a hex code or select from the color palette.
Tile Border Color	#EAECF0	Set the border color of individual Offer tiles using a hex code or select from the color palette.
Tile Background Hover Color	#ffffff	Set the hover background color of individual Offer tiles using a hex code or select from the color palette.
Button Radius	8px	Set the corner radius for the Perkswall CTA button in pixels (px)
Perkswall Background Color	#ffffff	Set the background color of the Perkswall page using a hex code or select from the color palette.
PerkWallet CTA Color	#101828	Set the background color of the PerksWallet button using a hex code. This allows users to save Offers to their wallet for later use. For more information, see the PerksWallet FAQ.
PerkWallet CTA Hover Color	#F44336	Set the hover background color for the PerksWallet button using a hex code or select from the color palette. For more information, see the PerksWallet FAQ.

Setting Name	Default Value	Description
Logo URL	None	Set the URL for the Perkswall logo. It serves as a hyperlink to your website when clicked on the logo.
Title Text	"You unlocked more exclusive offers."	Set customizable text that is displayed in the Perkswall header.
Offer Count	12	Set the initial number of Offers to display when the Perkswall is loaded.
Auto Show	Enabled	When enabled, more Offers are automatically loaded as the user scrolls down the page. When disabled, a "Show more" button appears at the end of the page to manually load more Offers.
Show Logo	Enabled	When enabled, your logo will be displayed in the header of the Perkswall. This logo can be set in the "General Settings" section or from the configuration settings within the dashboard.
Show Image	Enabled	When enabled, it displays each Offer's image in the Perkswall.
Show Header	Enabled	When enabled, it shows the header of Perkswall. You can specify the header appearance from the "Style Settings" section.
3D Tiles	Disabled	When enabled, it displays a 3D look for tiles.
Show Intermediate	Disabled	By default, this option is disabled, but you can choose from the dropdown. Selecting Modal (takes 60% of the screen) Interstitial (takes 90% of the screen) will show an intermediate screen when clicking on an Offer in Perkswall.

Setting Name	Default Value	Description
Custom Code before </Head> Tag	None	Add custom JavaScript code inside the Perkswall head tag. This code executes during the document's loading phase before the page's content is displayed to the user.
Custom Code before </Body> Tag	None	Add custom javascript code inside the Perkswall body tag, placing code here ensures that the page's HTML content is fully loaded before the scripts are executed

Updated 12 Nov 2024

Did this page help you?

Perkswall Direct Offers

Direct Offers

Perkswall Integration Page

Overview

Navigation

Perkswall Settings

General Settings

﻿Style Settings﻿

Text Style

Tile Styles

Theme Settings

Advance Settings

Style Settings