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
Chrome Extension coming soon!
The extension will allow you to easily customise the look of our widget and preview it on your site.
Last updated
Was this helpful?