How to customize your footer links

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

Clym provides two links that are added to the footer of your website in addition to your custom widget embed code. These footer links help create quick links for your users, 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.

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:

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

and it will look like this: