Styling customisation

It’s important to understand the structure of the widget before you can configure it to match your brand’s style. When visible to the user, the Criczop Web Widget can exist in one of the following states

Expanded

When in the expanded state, the widget takes up a space on the bottom right of your webpage. Here’s what the widget looks like on desktop:

On mobile web, in the expanded state, the widget takes up a space at the bottom of the page. Here’s what it looks like:

Docked - Style 1

The widget supports 2 different styles for the docked state. Style 1 is free of text, and here’s how it looks on desktop (see bottom-right):

And here’s how it looks on mobile:

Criczop Web Widget - Mobile Docked - Style 1

Docked - Style 2

When in the docked state (style 2), here’s what the widget looks like on desktop:

And here’s how it looks on mobile:

Criczop Web Widget - Mobile Docked - Style 2

Customisable UI elements

Styling for the Criczop Web Widget isn’t configurable via frontend code. Our team handles all styling customisations from the backend to ensure a seamless integration with your website’s branding.If you’d like to update the styling at any time, please reach out to your Gamezop Account Manager and we’ll be happy to help!

Given below are all the configurable elements with respect to the widget’s UI, and these can be configured separately for mobile and desktop.

Expanded state

The image below shows the different UI elements of the widget’s expanded state, each of which are customisable to match your brand’s style.

Criczop Web Widget - Expanded - Components

UI Element	What’s configurable?	Notes
Close button	Show / Hide	Shown by default. You can choose to hide the close button altogether.
	Background Colour	Hex code for the background colour of the close button.
	Icon Colour	Hex code for the cross icon’s colour.
	Border Colour	Hex code for the close button’s border.
	Border Width	Width of the close button’s border, in pixels. Default is 1px.
	Click Action	You can configure what happens if a user clicks on the close button. You can pick from 2 options: 1. Move the widget to the docked state 2. Hide the widget altogether
Criczop label	Font	You can pick any Google Font, or give us a link to any other custom font you may have licensed.
	Font Colour	Hex code for the Criczop label’s font colour.
	Font Weight	Weight of the font to be used for the Criczop label.
	Font Size	Size of the font to be used, in pixels.
Heading	Font	Same as Criczop label’s font note above
	Font Colour	Same as Criczop label’s font colour note above
	Font Weight	Same as Criczop label’s font weight note above
	Font Size	Same as Criczop label’s font size note above
	Default Text	Default heading text, ideally under 15 characters. This gets overridden when there’s a live update.
Text	Font	Same as Criczop label’s font note above
	Font Colour	Same as Criczop label’s font colour note above
	Font Weight	Same as Criczop label’s font weight note above
	Font Size	Same as Criczop label’s font size note above
	Default Text	Default text, ideally under 50 characters. This gets overridden when there’s a live update.
CTA	Background Colour	Hex code for the CTA’s background colour.
	Icon Colour	Hex code for the CTA’s arrow icon.
Image	Default Image URL	Default image for the widget; gets overridden when there’s a live update.
	Radius	Radius of the widget’s image, in pixels.
Background card	Background Colour	Hex code for the background card’s colour.
	Border Colour	Hex code for the border on the background card.
	Border Width	Width of the border on the background card, in pixels.
	Radius	Radius of the background card, in pixels.
	Shadow: X-offset	Optional, if you want the background card to have a shadow. You can customise the shadow’s X-offset.
	Shadow: Y-offset	You can similarly also customise the shadow’s Y-offset.
	Shadow: Colour	Hex code for the shadow’s colour.
	Shadow: Blur	Blur value for the shadow on the background card.

Docked state (Style 1)

The image below shows the different UI elements of the widget’s docked state (style 1), each of which are customisable to match your brand’s style.

Criczop Web Widget - Docked Style 1 - Components

UI Element	What’s Configurable?	Notes
Arrow icon	Colour	Hex code for the arrow icon’s colour
Image icon	Colour	Hex code for the image icon’s colour
	Background Colour	Hex code for the image icon’s background colour
Background card	Click Action	You can configure what happens if a user clicks on the widget in the docked state. You can pick from 2 options: 1. Move the widget to its expanded state 2. Take the user to your Criczop Unique Link
	Background Colour	Hex code for the background card’s colour
	Border Colour	Hex code for the background card’s border
	Border Width	Width of the background card’s border, in pixels.

Docked state (Style 2)

The image below shows the different UI elements of the widget’s docked state (style 2), each of which are customisable to match your brand’s style.

Criczop Web Widget - Docked Style 2 - Components

If you go ahead with Style 2 for the docked state of the widget, you can configure a few items in addition to the configurable items from Style 1.

UI Element	What’s Configurable?	Notes
Text	Font	You can pick any Google Font, or give us a link to any other custom font you may have licensed.
	Font Colour	Hex code for the text’s font colour.
	Font Weight	Weight of the font to be used for the text.
	Font Size	Size of the font to be used, in pixels.
	Default Text	Text to be shown in this docked state, ideally under 15 characters.

Your preferred styling is mapped to your Criczop Property ID.If you have multiple websites, and you have different styling requirements for each of them, you will need multiple Property IDs with each mapped to a different style config.

Customise scroll behaviour

You can also customise how the widget must behave when the user scrolls the page. There are 2 configurable items:

Should dock on scroll down: You can configure this to true or false.
- If set to true, the widget automatically moves to the docked state when users scroll downwards on your webpage. Nothing happens if the widget is already in the docked or off state before the user starts scrolling downwards.
- If set to false, scroll down behaviour does not affect the widget’s visibility state.
Should expand on scroll up: You can configure this to true or false.
- If set to true, the widget automatically moves to the expanded state when users scroll upwards on your webpage. Nothing happens if the widget is already in the expanded or off state before the user starts scrolling downwards.
- If set to false, scroll up behaviour does not affect the widget’s visibility state.

Test & preview your styling

You can use Criczop Web Widget’s Chrome Extension to preview the widget on your site, as well as to configure its styling by changing all its configurable values. Follow these steps:

Install the Chrome Extension on your browser from the link above
Navigate to your website, and open the extension. Wait for a few seconds for the widget to appear on your site.
Configure the various styling options (such as colours, border widths and so on) to match your site’s styling. The extension allows you to configure the widget’s desktop and mobile styling separately.
Simulate mobile mode on your browser and follow the same steps above to test the widget’s UI on your mobile site.
After you are done, copy your configuration or download the configuration as a JSON. To do so, use the copy / download buttons in the top-right of the extension. Send this configuration to your Gamezop Account Manager, and we’ll do the rest!

GET STARTED

INTEGRATE GAMEZOP

INTEGRATE QUIZZOP

INTEGRATE FEEDZOP

INTEGRATE ASTROZOP

INTEGRATE CRICZOP

INTEGRATE PERFORMANCE AD CAMPAIGNS

PLATFORM GUIDES & APIs

Structure of the Criczop Web Widget