Perkswall Integration Page
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.
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.
- 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.
- Logo: Upload your companyβs logo to be displayed in the header of your Perkswall page.
ο»Ώ
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. |
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:
|
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. |
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. |
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. |
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]