How to customize your footer links

Steps to take to stylize your Clym footer links on your website

In the Clym Portal, you can generate custom footer links for your website that act as quick links for users to directly open a specific location of your widget or Governance Portal, allowing them to better manage their personal data. Additionally, they can be beneficial for users who may not see the widget by default based on their location, as they can gain access to the widget through the footer links.

We understand that it is still important for your website to maintain its look and feel, and this can be achieved by stylizing your footer links through CSS. Below you can find several examples of how to achieve different styling goals. Please note that the links below are just examples and should not be directly copied onto your website. Please utilize your Clym Portal to generate your own custom footer links.

Privacy Center link:

<a href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

Do not sell or share my personal information link:

<a href="#" onclick="Clym.showWidget('/requests/new/do_not_sell_my_information', '', event);">Do not sell or share my personal information</a>

Styling the links

Most websites have a default styling for links, and Clym does not override these settings. However, if you would like to change the appearance of these links, you need to add styling attributes to the links. These links are regular HTML <a>  tags that can be styled by CSS. Here is how you can change certain things:

Text Color

<a **style="color:#000000"** href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

Where the #000000 is the HEX code of the color. To get the HEX code of any color, you can use any online color picker tool. For example: Google Color Picker

Text Background

<a **style="background-color:#ffffff"** href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

Font Size

<a **style="font-size:14px"** href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

Font Weight / Boldness?

<a **style="font-weight:bold"** href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

Other possible values:

• normal
• bold
• bolder
• lighter

Underline Formatting

<a **style="text-decoration:underline"** href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

If text-decoration is set to none, it will not have underline style on it.

Mixing different CSS attributes

If you would like to use 2 or more styling attributes on your links, you need to separate them with ;

Let's take an example: we want bold font, blue colored links without underlining, then we will write this:

<a **style="color:#111198;font-weight:bold;text-decoration:none"** href="#" onClick="Clym.showWidget('', '', event);">Privacy Center</a>

If you encounter any challenges, please reach out to us at support@clym.io.

Updated on: 30/04/2025