Widgets are self-contained blocks of functionality of your Booking Platform account that you can embed on your own website as a white-label integration. You simply copy the provided code snippet for each of these widgets and paste it into your Website builder tool, no developer skill is required.
Copying Widget Code Snippet
There are four types of Widgets available. You will copy the necessary code snippet in one of the following ways depending on the Widget you want to embed:
The code snippet for this Widget can be obtained under the "Share" option of each published Event Page under your business account. |
![]() |
The code snippet for this Widget can be obtained under the "Share" option on top of the Events Tab on your business account Dashboard. |
![]() |
The code snippet for this Widget can be obtained under the "Share" option of each available Event Idea Page under your business account. |
![]() |
The code for this Widget can be obtained under the "Share" option on top of the Ideas Tab on your business account Dashboard. |
![]() |
Pasting Into Your Website Builder
Important: The embed host website must be served from a secure domain (represented by a HTTPS address) and must match the official website mentioned on your Konnectclub Business Profile in order to present the full functionality under your own domain. Failure to meet the above hosting condition will not disable the Widget, but any click into it would result in a pop-up to a full page co-branded experience.
Now you will paste the code snippet obtained in the previous step. Look for the option to embed external widgets or code-snippets or videos in your specific Website Builder. This is sometimes available in the "source" mode or "code" mode. You must paste the code entirely as you obtained. If you are using one of the following Website Builder tools, please see the linked reference article for specific details:
- Squarespace - Code Blocks
- WordPress - HTML Embeds
- Wix - HTML Code
- Weebly - External Content
- GoDaddy - HTML Code
- ArtStoreFronts - Embed (follow the process from step 6 onward)
Customizing Embed Widget (Advanced)
Each embed Widget can be further customized by adding one or more of the following data-* attributes to the script tag in the code snippet. For example, the following code snippet will use a dark theme, will force the portrait layout regardless of the screen size and will not show the title and the description on the Widget .
<script src="https://www.konnectclub.com/embed/card/event/241373808975"
data-theme="dark"
data-layout="portrait"
data-exclude="title,details"></script>
Options | Possible Values | Explanation |
data-theme |
dark, light |
Specify dark theme if the hosting page has a dark background. Dark theme will use black background with a white foreground. Default value, when nothing is specified, is light. |
data-layout |
portrait, landscape |
Specify a layout to force that orientation regardless of the screen size. The default mode, when not specified, is responsive and changes depending on the screen width. |
data-layout-breakpoint |
a number |
Specify a pixel value which will force a switch of orientation from portrait to landscape in the auto (i.e. not specified) layout mode. If the available width is smaller than this value, the portrait mode is chosen. Default is 600. |
data-exclude |
title, image, info, actions, details |
Specify any combination of the possible values separated by comma to exclude the corresponding part from the widget. Default is none exclude. Following diagram shows various parts: |
Comments
0 comments
Article is closed for comments.