# Styling customisation

### 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

<details>

<summary>Expanded</summary>

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:

<figure><img src="/files/YjQvrXpj2g5DvzjG1CTj" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/TxXSIYmKxtgU3kwJjR5q" alt="" width="188"><figcaption></figcaption></figure>

</details>

<details>

<summary>Docked - Style 1</summary>

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):

<figure><img src="/files/VmaoMwPHpyo9hwJ3yaW6" alt=""><figcaption></figcaption></figure>

And here's how it looks on mobile:

<figure><img src="/files/HOVYnqOHEuRmwXyWWizf" alt="" width="188"><figcaption></figcaption></figure>

</details>

<details>

<summary>Docked - Style 2</summary>

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

<figure><img src="/files/OmndB7Ay1wGMIsPlYuUU" alt=""><figcaption></figcaption></figure>

And here's how it looks on mobile:

<figure><img src="/files/C3fQOkrDjjD9FYw4utme" alt="" width="188"><figcaption></figcaption></figure>

</details>

***

### Customisable UI elements

{% hint style="info" %}
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.&#x20;

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!
{% endhint %}

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.

<figure><img src="/files/aBPlGu1Mo3SgUqb2oXgC" alt=""><figcaption></figcaption></figure>

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

#### 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.

<figure><img src="/files/iLOOSTQQO9tfPn6D66KJ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="190.421875">UI Element</th><th width="190.16015625">What's Configurable?</th><th>Notes</th></tr></thead><tbody><tr><td>Arrow icon</td><td>Colour</td><td>Hex code for the arrow icon's colour</td></tr><tr><td>Image icon</td><td>Colour</td><td>Hex code for the image icon's colour</td></tr><tr><td></td><td>Background Colour</td><td>Hex code for the image icon's background colour</td></tr><tr><td>Background card</td><td>Click Action</td><td><p>You can configure what happens if a user clicks on the widget in the docked state. You can pick from 2 options: </p><ul><li>Move the widget to it's expanded state</li><li>Take the user to your Criczop Unique Link</li></ul></td></tr><tr><td></td><td>Background Colour</td><td>Hex code for the background card's colour</td></tr><tr><td></td><td>Border Colour</td><td>Hex code for the background card's border</td></tr><tr><td></td><td>Border Width</td><td>Width of the background card's border, in pixels.</td></tr></tbody></table>

#### 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.

<figure><img src="/files/H6Bc8kynqag71C8eZlaH" alt=""><figcaption></figcaption></figure>

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.**

<table><thead><tr><th width="190.421875">UI Element</th><th width="190.33984375">What's Configurable?</th><th>Notes</th></tr></thead><tbody><tr><td>Text</td><td>Font</td><td>You can pick any <a href="https://fonts.google.com/">Google Font</a>, or give us a link to any other custom font you may have licensed.</td></tr><tr><td></td><td>Font Colour</td><td>Hex code for the text's font colour.</td></tr><tr><td></td><td>Font Weight</td><td>Weight of the font to be used for the text.</td></tr><tr><td></td><td>Font Size</td><td>Size of the font to be used, in pixels.</td></tr><tr><td></td><td>Default Text</td><td>Text to be shown in this docked state, ideally under 15 characters.</td></tr></tbody></table>

{% hint style="info" %}
Your preferred styling is mapped to your Criczop Property ID.&#x20;

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.
{% endhint %}

#### Customise scroll behaviour

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

* <i class="fa-down">:down:</i> **Should dock on scroll down:** You can configure this to `true` or `false`.&#x20;
  * 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.
* <i class="fa-up">:up:</i> **Should expand on scroll up:** You can configure this to `true` or `false`.&#x20;
  * 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.

***

### <i class="fa-hourglass-half">:hourglass-half:</i> Test & preview your styling

You can use [Criczop Web Widget's Chrome Extension](https://chromewebstore.google.com/detail/criczop-web-widget-config/acfhcmokobcmiholadofcimcohaapmkf) to preview the widget on your site, as well as to configure its styling by changing all its configurable values.

Follow these steps:

1. Install the Chrome Extension on your browser from the link above
2. Navigate to your website, and open the extension. Wait for a few seconds for the widget to appear on your site.
3. 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.
4. [Simulate mobile mode on your browser](https://developer.chrome.com/docs/devtools/device-mode) and follow the same steps above to test the widget's UI on your mobile site.
5. 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!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.platform.gamezop.com/publishers/criczop/free-cricket-widget/styling-customisation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.