Theme Customizer

introduction to give you full control over customizing your theme visually, without manual code editing, we provide a theme customizer this tool allows you to build and tailor your theme according to your preferences, helping you organize and customize your themes to represent your brand effectively available features theme management seamlessly handle and switch between multiple themes precise control fine tune single and multi offer units with exacting detail view themes across desktop and mobile platforms instant previews view real time updates as you make changes navigation options to learn how to navigate to the theme customizer and explore its capabilities, follow the demo provided alternatively, you can access the theme customizer directly by clicking here customization options offer unit property description availability background color defines the background color of the entire o ffer unit mou, sou, perkswall corner radius specifies the radius of each corner of the offer unit, starting from the top left and moving clockwise mou, sou, perkswall shadow adds a shadow effect to the offer unit with a customizable color mou, sou, perkswall tile radius sets the border radius of the offer unit mou, perkswall border thickness specifies the thickness (in pixels) of the border around the offer unit mou tile gap defines the spacing (in pixels) between tiles in a multi offer unit default is 6px mou border color determines the border color for offer containers in mou mou, perkswall tile background color sets the background color for all tiles in a multi offer unit (mou) mou tile background hover color sets the background color that appears when a user hovers over a tile in a multi offer unit (mou) mou background hover color sets the background color that appears when a user hovers over the entire offer unit container mou, perkswall header and footer property description availability header text set a header text for the offer unit, with the option to include macros for personalization learn more about " implementing macros docid\ thhbtc6nydcibbdoyodo3 " mou, sou lead in text add introductory text above the offer description, with support for macros for personalization learn more about " implementing macros docid\ thhbtc6nydcibbdoyodo3 " mou, sou background color set the background color for the header in the offer unit mou, sou text color change the color of the header text mou, sou lead in text color set the color of the lead in text mou, sou lead in text & offer headline font size adjust the font size for the lead in text and offer headline mou, sou header text size set the font size for the header text mou, sou disclaimer text add customizable disclaimer text at the bottom of the offer unit mou, sou show branding toggle this option to show or hide the footer branding, which by default displays "powered by momentscience – privacy policy," mou, sou privacy policy link shown only if "show branding" is enabled includes a link to momentscience's privacy policy, which cannot be changed mou, sou footer text shown only if "show branding" is enabled displays "powered by momentscience" text, which cannot be changed mou, sou macros allow you to dynamically insert information about the order into critical components of the offer unit this capability enhances the customer experience by providing transaction details and helps optimize momentscience offers for better performance to ensure macros work correctly, the corresponding parameters must be included in the payload for example, when using the {{first name}} macro, make sure to pass a value for the first name parameter in the payload implementing macros offer text property description availability color set the color of the offer description text mou, sou font family select a font family from the dropdown list the available options include font families supported by google fonts https //fonts google com/ mou, sou offer text font size adjust the font size of the offer description text in pixels mou, sou button radius change the border radius of the cta buttons mou, sou, perkswall show offer image toggle to show or hide the offer image mou, sou image placement control the placement of the offer image (only available when "show offer image" is enabled) possible values image on left image on right sou button (yes please) configure the positive cta button for accepting an offer customize background color, hover color, stroke color, and text color mou, sou, perkswall button (no thanks) configure the negative cta button for declining an offer customize background color, hover color, stroke color, and text color sou button (perkswall cta) configure the positive cta button for the perkswall page, displaying "show more offers " customize background color, hover color, stroke color, and text color mou, sou theme settings property description availability embedded mode allows the offer unit to render inline within a specified container on the page, instead of appearing as an overlay when embedded mode is enabled, you can customize the following target element selector specifies the html element where the offer unit should be embedded enter the element’s id (e g , #offer container) show header toggles the visibility of the header section in embedded mode show footer toggles the visibility of the footer section, including disclaimers and branding fill container when enabled, the offer unit will expand to fill the height of the target container show border toggles the border around the embedded offer unit inherits styling from popup border settings offer unit delay duration set a delay for the offer unit to appear choose 'none' for instant loading, or select the delay in seconds mou, sou darken background (center) darken the background when the offer unit appears as an overlay centered on the screen mou, sou darken background (non center) darken the background when the offer unit appears as an overlay in corner positions( top left, top right, bottom left, or bottom right) mou, sou fixed progress bar display a fixed progress bar for navigation between next and previous offers sou progress bar type choose the visual style for the progress indicator specifies the visual style of the progress indicator in a single offer unit (sou) you can choose between numbered displays the step number for each offer (e g , ① ② ③) dots displays a simple dot for each offer (e g , ● ● ●) use this to match your desired ux or brand style show close offer unit display or hide the close offer (x) icon at the top right of the offer unit mou, sou open perkswall (on closing offer unit) open the perkswall url when the offer unit is closed mou, sou delay close offer unit delay the display of the close offer unit(x) icon when 'show close offer unit' is enabled mou, sou close offer unit delay time set a delay for the close offer unit(x) icon to appear after the first offer is shown only available if "delay close offer unit " is enabled mou, sou offer unit position desktop set the position of desktop offer unis, defaulting to the center with customizable offset options mou, sou offer unit animation set animation direction for the theme (top to bottom, bottom to top, left to right, or right to left) mou, sou vertical offset — desktop set a pixel margin from the top for a centered desktop offer position leaving blank or 0 centers the offer unit mou, sou vertical offset mobile set a pixel margin from the top for a centered mobile offer position leaving blank or 0 centers the offer unit mou, sou button order determine the order of cta buttons (positive or negative cta first) sou show disclaimer display disclaimer text in the offer unit's footer current disclaimer text "external link clicking an offer will take you to the advertiser's website and is subject to the terms linked above " mou, sou show perkswallet cta enable this option to display a perkswallet cta button, allowing users to save selected offers to their perkswallet account for later claiming mou, sou perkswallet cta set the text to appear on the perkswallet cta button by default, this is set to "save for later " mou, sou managing different the mes momentscience allows you to manage multiple themes, each of which can be customized independently every theme is assigned a unique slug id, which serves as its identifier you can pass the slug id in the theme id field within the payload or in the sdk using window\ adpxuser passing theme id in the sdk window\ adpxuser = { // customer information properties here theme id "replace this with your slugid", }; for more details on how to pass payload values, refer to the documentation here 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@m omentscience com