Implementation of the booking solution 1.0

The implementation of the konfetti booking solution is done in a few steps. If you need further help, please do not hesitate to contact us at partner@gokonfetti.com.

Step 1: Find event IDs

Go to your partner portal.
Go to “My Classes” on the left side menu.
You will find the ID under the respective course title (here: w1eevx).

Event ID

Step 2: Insert event ID into the event tag

Edit the text in the brackets after “data-event-id” by inserting the event ID from step 1.
Copy the code with your event ID.

💡 You must repeat this step for each course which you want to add to the booking solution.

<div data-width='499px' id='konfetti_iframe_wrapper' data-event-id='INSERT-YOUR-ID-HERE' data-background-color='CECECE' data-text-color='000000' lang="de-de" data-allow-fullscreen="false">
            <div id='konfetti_iframe'></div>
            <div id='konfetti_footer'>Buchungslösung von 
                <a href="<https://gokonfetti.com/de-de/>“ target="_blank"><img
                        alt="konfetti" src="<https://gokonfetti.com/_nuxt/img/full-logo-color-black.2475025.svg>“ width="80"“
                    >
                </a>
            </div>
        </div>

Step 3: Implement event tag

Now, you can insert the tag from step 2 at the position on your page where you want the konfetti booking solution to appear. Below, you can see an example of a konfetti partner. The highlighted area is the embedded checkout.

Now you can adjust the size and color:

Adjust the size and height under “data-width” and “data-heigth”
If you want, choose an individual color for the button and the font under “data-background-color” and “data-text-color”

Exemplary implementation

💡 Below you will find an exemplary implementation of the konfetti booking solution, where the event tag and the checkout script can be implemented.

⚠️ Please do not copy the box below as a whole, but implement the event tag and the checkout script separately at the appropriate place in the website code.

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <!-- 
    ====================================
      STEP 1: INSERT THE TAG WHEREVER 
      YOU WANT THE CHECKOUT TO SHOW

      PROPS:
      data-event-id: YOUR EVENT ID, AS SHOWN IN OUR WEBSITE
      data-background-color: THE HEX COLOR YOU WANT THE BUTTON TO BE
      data-text-color: THE HEX COLOR YOU WANT THE TEXT INSIDE THE BUTTON TO BE
      lang: THE LANGUAGE OF THE CHECKOUT. ACCEPTED ONLY „de-de“ or „en-us“

      OBSERVE THAT THE TAG id='konfetti_iframe' IS MANDATORY AND SHOULD NOT BE CHANGED.
    ====================================
    -->
        <div data-width='499px' id='konfetti_iframe_wrapper' data-event-id='pz90ez' data-background-color='CECECE' data-text-color='000000' lang="de-de" data-allow-fullscreen="false">
            <div id='konfetti_iframe'></div>
            <div id='konfetti_footer'>Buchungslösung von 
                <a href="<https://gokonfetti.com/de-de/>“ target="_blank"><img
                        alt="konfetti" sr
c="<https://gokonfetti.com/_nuxt/img/full-logo-color-black.2475025.svg>“ width="80"
                    >
                </a>
            </div>
        </div>
  </body>
  <!-- 
====================================
  STEP 2: IMPORT THE EMBEDDED CHECKOUT SCRIPT 
  INSIDE YOUR PAGE 
====================================
-->
<script src="<https://gokonfetti.com/scripts/embedded-checkout.v2.js>“ prefetch></script>
</html>