Knowledge Base > Widget settings > How to create and style the widget

How to create the widget?

1. Go to Settings > Settings > Booking Settings

2. Scroll down to the bottom of the page. You will find the Widget Code.

Widget code

This will generate a basic Black & White widget as seen below.

3. You may then embed the iframe of the widget on your website. 

Widget Example

How to change the style of the widget?

1. If you would like to change the style of the widget, click on Change Style.

Change style for widget

2. This will open up a Widget Preview window, where you can change colours and font size of your widget. As an example, the image below shows the text color changed to red.

Changing widget style

3. Once you finish styling your widget, scroll down and copy the code to your iframe link. See below example:

<iframe src= https://app.tableo.com/widget/ben-prelaunch-rest/?bgColor=%23ffffff&textColor=%23ff0000&formControlBgColor=%23ffffff&formControlColor=
%23000000&buttonBgColor=%23000000&buttonTextColor=%23ffffff&fontSize=14px width=”100%” height=” 100%” style=”border:none;min-height:700px”></iframe>

 
Change in iframe