You can now add a 'Book Now' button linked to your Yondo library of Live 1-to-1 listings into your Weebly site through our Website Plugin function. You can link the button to of one team member or your whole team. When your client clicks on the booking button your calendar is shown as an overlay on your website so your clients never have to leave your site to view your calendar. Though this is not a part of the Yondo Weebly Webinar App, it will still help make the most of your Yondo experience if you are using our full service.
How to Add a Live 1-to-1 'Book Now' Plugin to Your Weebly Website.
First, in your Yondo Dashboard go to the Website Plugin tab, under Live 1-to-1.
Here, under 'Choose a Team Member', you can choose a single team member or all team members to be included in the plugin.
Next, you will choose to add the plugin to either a new button or an existing element.
To add a new "Book Now" button to your Weebly site:
1. Copy the HTML code for the button.2. Next, go into your Weebly Page Editor and add an 'Embed Code' by dragging and dropping the element where you would like the button to appear to your site.
3. Click on the element and select 'Edit Custom HTML'. This will open up the text field where you will paste your HTML code. Once the code has been added, simply click out of the box to apply the code to the element.
Note** The button may not appear in the editor mode of Weebly. The button will appear on your published site even if it is not visible in the editor.
If you want to change the style of the Book Now button (Advanced):
The HTML code pasted in the previous section contains the default styles which is an orange colored button. To change the style, examine the HTML code and find the style="..." attribute. The text between the double quotes is CSS code and this is what controls the style of the button. The code contains a list of style rules which are applied to the button. The style rules are delimited by a semi-colon.
Make adjustments where necessary. Each style follows the format style-name: value; The style name is one word with dashes, followed by a colon. The value can contain spaces and ends with a semi-colon.
You can find more information about CSS here: http://www.w3schools.com/css/.
To make the background blue.
- Change background style to #3284FF (this is the hex code for a shade of blue, but you can use the code for any color).
- Remove background-gradient style.
- Remove text-shadow.
- Change border to none.
- Remove font-weight.
- Remove font-family.
Result: style="background: #3284FF; color: #ffffff; min-width: 220px; font-size: 24px; line-height: 50px; border:none; border-radius: 4px; cursor: pointer;"
This should result in a button similar to the image below, and when clicked, the element will trigger the booking calendar to show as an overlay on the page.
How Customers will use the 'Book Now' button
When customers click on the button on your Weebly page, they will need to choose the team member they would like to schedule a meeting with, unless the button is specific to a certain team member already.
They will then choose the session they would like to book and the availability calendar will appear. Here, customers will choose the date and time that works best for them on the Booking Calendar.
Your customers will then be taken to the checkout page, where they will give their information and purchase your Live 1-to-1 sessions. Once they have completed their purchase, they will click continue on the Booking Confirmation Page and be redirected to your personal site.
You can also create a 'Book Now' button for a single session, as opposed to a team member. To learn how to add a 'Book Now' button to your page, please refer to our article on How to Insert a "Book Now" Button on Your Website For a Single Live 1-to-1 Listing?
Our integration team can also do this and other integration tasks for you for a nominal fee. Contact our support team for pricing at email@example.com