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:

  1. Click on "Integration" in the left sidebar of the dashboard.
  2. 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
Favicon
ο»Ώ
  • Logo: Upload your company’s logo to be displayed in the header of your Perkswall page.
Document image
ο»Ώ

ο»Ώ

ο»Ώ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.
Document image
ο»Ώ
  • Image: Upload a custom header image. For the best display, ensure the image matches the recommended dimensions of 1440x130 px.
Document image
ο»Ώ
  • Color: Set a solid background color for the header. You can either enter a HEX code or select a color from the palette.
Document image
ο»Ώ
  • ο»Ώ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
ο»Ώ
ο»Ώ

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.

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.

PerkWallet CTA Hover Color

#F44336

Set the hover background color for the PerksWallet button using a hex code or select from the color palette.

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 clicking 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]