While Zibster includes its own scheduling features, you might prefer using a third-party scheduler or calendar service such as Acuity Scheduling, Iris Works, Honeybook, Calendly, or Schedulicity. This guide will help you add a third-party scheduler or calendar to your Zibster website.
Please Note: Zibster Support can assist with adding the HTML block and inserting the code for a third-party scheduler or calendar. For specific questions about design, functionality, or other details related to your third-party calendar or scheduler, please contact your provider's support resources.
STEP ONE
Obtain the Embed Code
Get the embed code from your chosen scheduler or calendar provider. This code will enable you to integrate their scheduling/calendar feature into your website.
STEP TWO
Log into your Zibster account and click on WEBSITE in the left-side menu.
STEP THREE
Add an HTML Block
Go to the page where you want to add the HTML block or create a new page.
You have two options for adding an HTML block:
- Drag and Drop Method:
Click on the HTML icon in the left-side menu. The HTML block will appear at the bottom of your page.
Alternatively, hover over the HTML icon, click and hold the left mouse button, then drag the block to your desired location. Release the mouse button when a teal-colored line appears to place the block. You can move it by dragging it up or down.
- Directly Add an HTML Block:
Click on the HTML icon, and the block will appear at the bottom of your page.
STEP FOUR
Insert Your Embed Code
To add the embed code to your HTML block:
Click inside the block or on the pencil icon at the top right and select Advanced.
A menu will open on the right side of your control panel, providing a text box where you can paste your HTML embed code.
Add the code and click Save Changes.
Styling Options for Your HTML Block
Colors
Use the color options in the HTML block settings to customize the color of your block. This color will override the global color settings found under the DESIGN tab. Click on the color square or enter the HEX color code to customize the Background Color.
Background Image
Add a background image to your HTML block by uploading an image or selecting one from the Background Library. Customize the display of the background image using these options:
- Tile: Tiles the image to fill the background.
- Top Left: Aligns the image to the top left.
- Centered: Centers the image in the available space.
- Cover: Scales the image to cover the background completely.
Click SAVE CHANGES to apply your background settings.
Leave a comment
0 Comments