Styling customisation
The Criczop Web Widget offers a highly customisable UI, allowing you to seamlessly match the widget’s appearance to your brand’s style and design.
Structure of the Criczop Web Widget
It's important to understand the structure of the widget before you can configure them 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:
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:
Customisable UI elements
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.
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:
Move the widget to the docked state
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 get's 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 get's 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.
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.
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:
Move the widget to it's expanded state
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.
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.
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.
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
trueorfalse.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
trueorfalse.If set to
true, the widget automatically move 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!
Last updated
Was this helpful?