Button designer

We have developed the button designer so that you can add on your website the button, customized with multiple options, to access your online calendar.

Each button you design will have its own integration code that must be used to embed the button on your website.

Login to TuCalendi with your username and password. Go to the "Embed codes" option in the vertical menu:

Embed codes

In the "Button" section click on "Select".

Widget button type

Choose the type of widget you want to embed on your website.

  • Calendar.
  • Smart Survey.
The process is exactly the same for both widget types.

Select "Calendar":

Embed code

Click on the drop-down menu and choose the Calendar or Event you want to display when a person clicks on the book button.

In this case we have chosen the event called "First Event (30 Min)".

Activate the "Use button designer" option.

embed button code designer

Clicking on "Button designer" takes you to the designer with numerous options for you to create the button as you wish.

Button designer

The possibilities to design and customize the buttons are multiple:

  • Button Text. The message displayed on the button. You can create an attractive call to action that will make your customers want to click and book an appointment.
  • Button color.
  • Text color.
  • Font family. You can choose between different fonts for the button text.
  • Text align. Align the text on the button.
  • Font style.
  • Font weight. To choose the font weight.
  • Font size. To change the font size by simply moving on the bar to increase or decrease the size.
  • Minimum width. The minimum width of the button.

And other options that besides having the bar to change the value, when you click on the "Padlock", they will be unlocked and you will be able to play more with these functions.

  • Padding.

Diseñador de botones padding

  • Border radius.

Diseñador de botones radio del borde

  • Box shadow.

Diseñador de botones sombras

When you have designed the button:

Button designed

 click "Save" and the embed code for the button you have designed will be generated:

Embed code for a buttonYou only need to copy the code and paste it into your website to display it as you have designed it.