Web customization - WEB_CLIENT_ZONE
The new WEB_CLIENT_ZONE channel empowers you to change the visual aspects of your microsite directly from the Admin Control Center (Admin CC) without needing to rebuild the backend each time. This feature streamlines the process of updating your microsite, making it faster and more efficient to keep your site looking fresh and aligned with your brand.
Settings Tab
In the settings tab, you have access to a variety of components that you can customize. This includes changing colors, modifying the composition of sections, and updating text content. The intuitive interface ensures that you can make these changes easily and see the results immediately.
To access the settings tab, navigate to: Settings > Channel > WEB_CLIENT_ZONE > Settings.
Customizable Components
- Colors: Adjust the colors of various elements on your microsite to match your brand’s color scheme.
- Composition: Rearrange the layout and structure of different sections to optimize the user experience.
- Text: Update and edit the text content to keep information current and relevant.
Microsite sections
Here is a list of the sections that can be dynamically changed from the Admin CC.
Card
This section allows you upload the background of the loyalty card.
Help picture to find card ID (deprecated)
Loyalty Card BG Images - This setting is for setting the background of the loyalty card.
![](https://files.readme.io/9d2712d-Screenshot_2024-05-31_at_19.23.10.png)
Coupon
In this section you can change all the visual aspects regarding colours and text content for certain elements.
- active_text - This setting is for setting a display text on the activated coupons
![](https://files.readme.io/64a129f-Screenshot_2024-05-31_at_19.25.31.png)
- button_active - Color of button on activated coupons
- button_active_text - Color of text on the actual button of activated coupons
button_inactive (deprecated)button_inactive_text (deprecated)- button_use - Color of button on coupons that are locked or not activated yet
- button_use_text - Color of text (lock) on the actual button on coupons that are not activated yet
- ribbon - Color of ribbon that appear on coupons that are about to expire
- tile - Color of the right side tile of the coupon
- title_text - Color of the coupon Title
![](https://files.readme.io/7d4ffe5-Screenshot_2024-05-31_at_19.30.49_2.png)
Footer
- background - Color of the footer background
- consents - True / False toggle whether to display consents or not
- Display Center Column - True / False toggle whether to display "Links in Center Column" or not
- Display Left Column - True / False toggle whether to display "Links in Left Column" or not
- Display Right Column - True / False toggle whether to display "Links in Right Column" or not
- enabled - True / False toggle whether to display the Footer section or not
- Links in Center Column - List of links to display in the footer
- Links in Left Column - List of links to display in the footer
- Links in Right Column - List of links to display in the footer
- text - Color of all the text in footer
- Text in Center Column - Title for the Center Column
- Text in Left Column - Title for the Left Column
- Text in Right Column - Title for the Right Column
![](https://files.readme.io/97d1ecf-Screenshot_2024-05-31_at_19.35.23.png)
General
access_account (deprecated)
card (deprecated)
card_pair (deprecated)
Confirm Button Background - Color of all "Confirm" buttons pop up windows
Confirm Button Text Color - Color of text of the "Confirm" buttons pop up windows
![](https://files.readme.io/bda1799-Screenshot_2024-05-31_at_19.40.08.png)
devilery_addresses (deprecated)
facebook_link (deprecated)
flag (deprecated)
hide_personal_requests - True / False toggle whether to allow users to "Request personal data" or not
![](https://files.readme.io/ff2ae48-Screenshot_2024-05-31_at_19.41.48.png)
Image on Auth Page - Image on the left side of login/register screen
![](https://files.readme.io/d977447-Screenshot_2024-05-31_at_19.42.39.png)
instagram_link (deprecated)
lang - Primary language of the microsite
name (deprecated)
routes - Set up microsite nav bar
![](https://files.readme.io/7e6e3b7-Screenshot_2024-05-31_at_19.43.20.png)
sms_login - True / False toggle whether to use login via sms or not
tiktok_link (deprecated)
web - When turned off the microsite will become a one page site only showing the Profile screen. Nav bar will also be disabled.
Header
background - Color of the header background
border - True / False toggle whether to show a border at the bottom of the header or not
border_bottom - Color of the bottom border of header
border_thickness - Thickness of the border in pixels
height - Height of the border in pixels
Logo image - Logo image in the header
logo_link - Link used in the logo image
logo_width - Logo width in pixels
![](https://files.readme.io/beb7eb4-Screenshot_2024-06-03_at_10.26.21.png)
Homepage
- button - Color of all buttons shown on homepage (doesn't apply to coupons buttons)
- button_text - Text color of all button text on homepage
![](https://files.readme.io/4607b55-Screenshot_2024-06-03_at_10.29.47.png)
Instagram (widget)
- Button Background - Button background color for the for the instagram widget
- Button Text Color - Text color for the button
- Widget Background - Color of widget background
![](https://files.readme.io/89daaaa-Screenshot_2024-06-03_at_10.30.59.png)
Login
- button_confirm_big - Color of the confirm button
- button_confirm_big_text - Text color of the confirm button
- button_sign_in - Color of the sign in button
- button_sign_in_text - Text color of the sign in button
- button_sign_up - Color of the sign up button
- button_sign_up_text - Text color of the sign up button
sign_up_card_pair (deprecated)
![](https://files.readme.io/4e21740-Screenshot_2024-06-03_at_10.31.58.png)
Menu
-
background - Background color of the nav bar
-
mobile_menu_background - Background color of the nav bar on mobile
-
mobile_menu_text - Nav bar text color on mobile
-
text - Nav bar text color
-
underline - Underscore color
-
unread_news_background - Color of the notification dot on the bell icon
-
unread_news_text - Text color of the notification dot
News
- divider - Color of the dividers in between news
- title - Title used in the News section
![](https://files.readme.io/1d66ca3-Screenshot_2024-06-03_at_10.42.03.png)
Profile
link_urls (deprecated)
links (deprecated)
Reward
background
border
button
button_text
detail_button_redeem
detail_button_redeem_inactive
detail_button_redeem_inactive_text
detail_button_redeem_text
detail_button_return
detail_button_return_text
highlight
highlight_inactive
react_app_reward_button_inactive
react_app_reward_button_inactive_text
redeem_button_cancel
redeem_button_cancel_text
redeem_button_order
redeem_button_order_text
redeem_dropdown_shading
text
Sidebar
- background - Background color of the sidebar
- button - Button color
- button_divider - Colof of the news devider on sidebar
- button_text - Button text color
- text - Text color used for News title and description on sidebar
![](https://files.readme.io/42b7b3b-Screenshot_2024-06-03_at_10.43.57.png)
Transaction
points_neg - Color of the negative points records
points_pos - Color of the positive points records
text - Text color for the rest
User Bar
background (deprecated)
points_pillbox (deprecated)
points_pillbox_text (deprecated)
text (deprecated)
Updated 3 months ago