{"id":252,"date":"2021-08-21T07:30:29","date_gmt":"2021-08-21T07:30:29","guid":{"rendered":"https:\/\/support.konnectclub.com\/?ht_kb=embedding-a-widget"},"modified":"2021-11-12T09:03:47","modified_gmt":"2021-11-12T17:03:47","slug":"embedding-a-widget","status":"publish","type":"ht_kb","link":"https:\/\/support.konnectclub.com\/?ht_kb=embedding-a-widget","title":{"rendered":"Embedding a Widget"},"content":{"rendered":"\n

Widgets are self-contained blocks of functionality of your Konnectclub<\/span> 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.<\/p>\n\n\n\n

Copy Code Snippet<\/h2>\n\n\n\n

There are four<\/strong> 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:<\/p>\n\n\n\n

Event Widget<\/h3>\n\n\n\n

This type of Widget shows up-to-date information summary of an event and the ticket check-out option directly on your website. Full details of the event, including the entire ticket payment flow, is presented as a light-box without leaving your website.<\/p>\n\n\n\n

The code snippet for this Widget can be obtained under the \u201cShare\u201d option of each published Event Page under your business account.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Event List Widget<\/h3>\n\n\n\n

This widget shows a list of events under your account in a chronological calendar format. Events are dynamically ordered based on their closeness to the current date. Each event presents a link target to show additional details and the option to “Get Ticket” via a light-box.<\/p>\n\n\n\n

The code snippet for this Widget can be obtained under the “Share” option on top of the Events Tab on your account Dashboard.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Event Idea Widget<\/h3>\n\n\n\n

This widget shows the information about an event package and an option to “Book” it directly on your website. Full details of the package and the booking flow is presented as light-box if initiated by the user.  <\/p>\n\n\n\n

The code snippet for this Widget can be obtained under the “Share” option of each available Event Idea Page under your business account.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Event Idea List Widget<\/h3>\n\n\n\n

This widget shows a list of event packages under your business account. Event packages are dynamically ordered based on their popularity. Each event package presents a link target to show additional details and the option to “Book” via a light-box. <\/p>\n\n\n\n

The code for this Widget can be obtained under the “Share” option on top of the Ideas Tab on your business account Dashboard.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Paste Code Into Your Website Builder <\/span><\/h2>\n\n\n\n

Important<\/strong>
The embed host website must be served from a secure domain (represented by a HTTPS <\/strong>address) and must match the official website mentioned on your Konnectclub<\/span> 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. <\/p>\n\n\n\n

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:<\/p>\n\n\n\n

  1. Squarespace<\/strong> – Code Blocks<\/a><\/li>
  2. WordPress<\/strong> – Custom HTML Block<\/a><\/li>
  3. Wix<\/strong> – HTML Code<\/a><\/li>
  4. Weebly<\/strong> – External Content<\/a><\/li>
  5. GoDaddy<\/strong> – HTML Code<\/a><\/li>
  6. ArtStoreFronts<\/strong> – Embed<\/a> (follow the process from step 6 onward)<\/li><\/ol>\n\n\n\n

    Customize Widget (Advanced)<\/h2>\n\n\n\n

    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<\/strong>, will force the portrait layout<\/strong> regardless of the screen size and will not show the title and the description on the Widget .<\/p>\n\n\n\n

    <script src=\"https:\/\/www.konnectclub.com\/embed\/card\/event\/241373808975\" 
        data-theme=<\/span>\"dark\" 
        data-layout=<\/span>\"portrait\" 
        data-exclude=<\/span>\"title,details\"><\/script><\/pre>\n\n\n\n
    Options<\/td>Possible Values<\/td>Explanation<\/td><\/tr>
    data-theme<\/strong><\/td>\n
    dark, <\/strong>light<\/strong><\/p>\n<\/td>
    		Specify dark<\/em> 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<\/em>.<\/td><\/tr>
    data-layout<\/strong><\/td>\n
    portrait, landscape<\/strong><\/p>\n<\/td>
    		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.<\/td><\/tr>
    data-layout-breakpoint<\/strong><\/td>\n
    a number<\/strong><\/p>\n<\/td>
    		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.<\/td><\/tr>
    data-exclude<\/strong><\/td>\n
    title, image, info, actions, details<\/strong><\/p>\n<\/td>
    		\n
    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:<\/p>\n
    \"mceclip4.png\"<\/figure>
    <\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Widgets are self-contained blocks of functionality of your 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. Copy Code Snippet…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[27],"ht-kb-tag":[],"class_list":["post-252","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-streaming"],"_links":{"self":[{"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=\/wp\/v2\/ht-kb\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=252"}],"version-history":[{"count":8,"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=\/wp\/v2\/ht-kb\/252\/revisions"}],"predecessor-version":[{"id":881,"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=\/wp\/v2\/ht-kb\/252\/revisions\/881"}],"wp:attachment":[{"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=252"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=252"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.konnectclub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}