Customize the Colours of the Reservation Widget

You can personalize the colours of your online widget to display your brand image. To change the colours of the widget, follow the steps below:

1. Find the link to your reservation widget
2. Find the RGB colour codes that you wish to add to your widget (find your colour codes here) or use a colour picker if you are not comfortable with RGB)
3. Add the codes to your reservation widget by following the directives below

How to add codes to your widget URL

To add the codes:

1. Add a question mark (?) at the end of your URL
2. Write the first code (i.e. bg-color) followed by an equal sign (=) 
3. Write 'rgb' followed by the colour code in parentheses (i.e. rgb(237,27,36) )
4. If you wish to add other codes after this, separate each codes with the sign (&)

A personalized widget URL would look like this:

https://widgets.libroreserve.com/WEB/QC015241623394/book?bg-color=rgb(240,242,245)&bg-color-2=rgba(28,51,92,0.05)&btn-color=rgb(28,51,92)&btn-text-color=rgb(255,255,255)&text-color=rgb(45,55,72)&text-color-2=rgb(28,51,92)&text-color-3=rgb(71,85,105)

Note: You can add transparency to a colour by using RGBA. i.e. rgba(39,39,39,0.5): 0.5 = 50% of transparency.

List of codes to customize your widget

• Change the background colour of the widget

  Code: bg-color

  

• Change the background colour for personal information and reservation summary boxes

  Code: bg-color-2

  

• Change the colour of the buttons

  Code: btn-color

  .

• Change the text colour for the whole widget

  Code: text-color

  

• Change the text colour for the personal information and reservation summary boxes

  Code: text-color-2

  

• Change the text colour of the restaurant address

  Code: text-color-3