![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 16.071 12.955 L 16.071 9.651 C 16.071 8.941 15.496 8.365 14.786 8.365 L 9.643 8.365 L 9.643 5.061 C 10.897 4.737 11.714 3.532 11.551 2.247 C 11.388 0.963 10.295 0 9 0 C 7.705 0 6.612 0.963 6.449 2.247 C 6.286 3.532 7.103 4.737 8.357 5.061 L 8.357 8.365 L 3.214 8.365 C 2.504 8.365 1.929 8.941 1.929 9.651 L 1.929 12.955 C 0.675 13.279 -0.142 14.484 0.021 15.769 C 0.184 17.053 1.277 18.016 2.572 18.016 C 3.866 18.016 4.959 17.053 5.122 15.769 C 5.286 14.484 4.468 13.279 3.214 12.955 L 3.214 9.651 L 14.786 9.651 L 14.786 12.955 C 13.532 13.279 12.714 14.484 12.878 15.769 C 13.041 17.053 14.134 18.016 15.428 18.016 C 16.723 18.016 17.816 17.053 17.979 15.769 C 18.142 14.484 17.325 13.279 16.071 12.955 M 3.857 15.437 C 3.857 16.147 3.282 16.722 2.572 16.722 C 1.861 16.722 1.286 16.147 1.286 15.437 C 1.286 14.727 1.861 14.151 2.572 14.151 C 3.282 14.151 3.857 14.727 3.857 15.437 M 7.714 2.58 C 7.714 1.87 8.29 1.294 9 1.294 C 9.71 1.294 10.286 1.87 10.286 2.58 C 10.286 3.29 9.71 3.865 9 3.865 C 8.29 3.865 7.714 3.29 7.714 2.58 M 15.428 16.722 C 14.718 16.722 14.143 16.147 14.143 15.437 C 14.143 14.727 14.718 14.151 15.428 14.151 C 16.139 14.151 16.714 14.727 16.714 15.437 C 16.714 16.147 16.139 16.722 15.428 16.722" fill="rgb(0, 0, 0)" height="18.016311920580208px" id="GKXyVanMq" stroke-dasharray="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.5" stroke="rgb(0, 0, 0)" transform="translate(3 3)" width="18px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="t2lXByE48-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient><linearGradient id="CBS1bzkxF-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient><linearGradient id="Jd7AK81w9-2031533640-linear-gradient" x1="0.49751243781094523" x2="0.5024875621890548" y1="0" y2="1"><stop offset="0" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(227, 224, 244)"/></linearGradient></defs><g d="M 0 16 L 0 0 L 16 0 L 16 16 Z M 9.167 5.167 C 9.167 4.891 8.943 4.667 8.667 4.667 C 8.391 4.667 8.167 4.891 8.167 5.167 C 8.167 6.784 7.809 7.834 7.155 8.488 C 6.501 9.143 5.451 9.5 3.833 9.5 C 3.557 9.5 3.333 9.724 3.333 10 C 3.333 10.276 3.557 10.5 3.833 10.5 C 5.451 10.5 6.501 10.857 7.155 11.512 C 7.809 12.166 8.167 13.216 8.167 14.833 C 8.167 15.109 8.391 15.333 8.667 15.333 C 8.943 15.333 9.167 15.109 9.167 14.833 C 9.167 13.216 9.524 12.166 10.178 11.512 C 10.832 10.857 11.883 10.5 13.5 10.5 C 13.776 10.5 14 10.276 14 10 C 14 9.724 13.776 9.5 13.5 9.5 C 11.883 9.5 10.832 9.143 10.178 8.488 C 9.524 7.834 9.167 6.784 9.167 5.167 Z M 4 3.667 C 4 3.483 3.851 3.333 3.667 3.333 C 3.483 3.333 3.333 3.483 3.333 3.667 C 3.333 4.32 3.189 4.715 2.952 4.952 C 2.715 5.189 2.32 5.333 1.667 5.333 C 1.483 5.333 1.333 5.483 1.333 5.667 C 1.333 5.851 1.483 6 1.667 6 C 2.32 6 2.715 6.145 2.952 6.382 C 3.189 6.618 3.333 7.013 3.333 7.667 C 3.333 7.851 3.483 8 3.667 8 C 3.851 8 4 7.851 4 7.667 C 4 7.013 4.145 6.618 4.382 6.382 C 4.618 6.145 5.013 6 5.667 6 C 5.851 6 6 5.851 6 5.667 C 6 5.483 5.851 5.333 5.667 5.333 C 5.013 5.333 4.618 5.189 4.382 4.952 C 4.145 4.715 4 4.32 4 3.667 Z M 7.333 1 C 7.333 0.816 7.184 0.667 7 0.667 C 6.816 0.667 6.667 0.816 6.667 1 C 6.667 1.422 6.573 1.65 6.445 1.778 C 6.317 1.906 6.089 2 5.667 2 C 5.483 2 5.333 2.149 5.333 2.333 C 5.333 2.517 5.483 2.667 5.667 2.667 C 6.089 2.667 6.317 2.761 6.445 2.889 C 6.573 3.016 6.667 3.244 6.667 3.667 C 6.667 3.851 6.816 4 7 4 C 7.184 4 7.333 3.851 7.333 3.667 C 7.333 3.244 7.427 3.016 7.555 2.889 C 7.683 2.761 7.911 2.667 8.333 2.667 C 8.517 2.667 8.667 2.517 8.667 2.333 C 8.667 2.149 8.517 2 8.333 2 C 7.911 2 7.683 1.906 7.555 1.778 C 7.427 1.65 7.333 1.422 7.333 1 Z" fill="transparent" height="16px" id="aoZYv33vR" width="16px"><path d="M 0 16 L 0 0 L 16 0 L 16 16 Z" fill="transparent" height="16px" id="Z2uGmhW9f" width="16px"/><g d="M 7.833 4.5 C 7.833 4.224 7.609 4 7.333 4 C 7.057 4 6.833 4.224 6.833 4.5 C 6.833 6.117 6.476 7.168 5.822 7.822 C 5.168 8.476 4.117 8.833 2.5 8.833 C 2.224 8.833 2 9.057 2 9.333 C 2 9.61 2.224 9.833 2.5 9.833 C 4.117 9.833 5.168 10.191 5.822 10.845 C 6.476 11.499 6.833 12.549 6.833 14.167 C 6.833 14.443 7.057 14.667 7.333 14.667 C 7.609 14.667 7.833 14.443 7.833 14.167 C 7.833 12.549 8.191 11.499 8.845 10.845 C 9.499 10.191 10.549 9.833 12.167 9.833 C 12.443 9.833 12.667 9.61 12.667 9.333 C 12.667 9.057 12.443 8.833 12.167 8.833 C 10.549 8.833 9.499 8.476 8.845 7.822 C 8.191 7.168 7.833 6.117 7.833 4.5 Z M 2.667 3 C 2.667 2.816 2.517 2.667 2.333 2.667 C 2.149 2.667 2 2.816 2 3 C 2 3.654 1.855 4.048 1.618 4.285 C 1.382 4.522 0.987 4.667 0.333 4.667 C 0.149 4.667 0 4.816 0 5 C 0 5.184 0.149 5.333 0.333 5.333 C 0.987 5.333 1.382 5.478 1.618 5.715 C 1.855 5.952 2 6.346 2 7 C 2 7.184 2.149 7.333 2.333 7.333 C 2.517 7.333 2.667 7.184 2.667 7 C 2.667 6.346 2.811 5.952 3.048 5.715 C 3.285 5.478 3.68 5.333 4.333 5.333 C 4.517 5.333 4.667 5.184 4.667 5 C 4.667 4.816 4.517 4.667 4.333 4.667 C 3.68 4.667 3.285 4.522 3.048 4.285 C 2.811 4.048 2.667 3.654 2.667 3 Z M 6 0.333 C 6 0.149 5.851 0 5.667 0 C 5.483 0 5.333 0.149 5.333 0.333 C 5.333 0.756 5.239 0.984 5.112 1.112 C 4.984 1.239 4.756 1.333 4.333 1.333 C 4.149 1.333 4 1.483 4 1.667 C 4 1.851 4.149 2 4.333 2 C 4.756 2 4.984 2.094 5.112 2.222 C 5.239 2.35 5.333 2.578 5.333 3 C 5.333 3.184 5.483 3.333 5.667 3.333 C 5.851 3.333 6 3.184 6 3 C 6 2.578 6.094 2.35 6.222 2.222 C 6.35 2.094 6.578 2 7 2 C 7.184 2 7.333 1.851 7.333 1.667 C 7.333 1.483 7.184 1.333 7 1.333 C 6.578 1.333 6.35 1.239 6.222 1.112 C 6.094 0.984 6 0.756 6 0.333 Z" fill="transparent" height="14.66671286102295px" id="ae6ccdFme" transform="translate(1.333 0.667)" width="12.66663px"><path d="M 5.833 0.5 C 5.833 0.224 5.609 0 5.333 0 C 5.057 0 4.833 0.224 4.833 0.5 C 4.833 2.117 4.476 3.168 3.822 3.822 C 3.168 4.476 2.117 4.833 0.5 4.833 C 0.224 4.833 0 5.057 0 5.333 C 0 5.61 0.224 5.833 0.5 5.833 C 2.117 5.833 3.168 6.191 3.822 6.845 C 4.476 7.499 4.833 8.549 4.833 10.167 C 4.833 10.443 5.057 10.667 5.333 10.667 C 5.609 10.667 5.833 10.443 5.833 10.167 C 5.833 8.549 6.191 7.499 6.845 6.845 C 7.499 6.191 8.549 5.833 10.167 5.833 C 10.443 5.833 10.667 5.61 10.667 5.333 C 10.667 5.057 10.443 4.833 10.167 4.833 C 8.549 4.833 7.499 4.476 6.845 3.822 C 6.191 3.168 5.833 2.117 5.833 0.5 Z" fill="url(%23t2lXByE48-2031533640-linear-gradient)" height="10.66671px" id="t2lXByE48" transform="translate(2 4)" width="10.66663px"/><path d="M 2.667 0.333 C 2.667 0.149 2.517 0 2.333 0 C 2.149 0 2 0.149 2 0.333 C 2 0.987 1.855 1.382 1.618 1.618 C 1.382 1.855 0.987 2 0.333 2 C 0.149 2 0 2.149 0 2.333 C 0 2.517 0.149 2.667 0.333 2.667 C 0.987 2.667 1.382 2.811 1.618 3.048 C 1.855 3.285 2 3.68 2 4.333 C 2 4.517 2.149 4.667 2.333 4.667 C 2.517 4.667 2.667 4.517 2.667 4.333 C 2.667 3.68 2.811 3.285 3.048 3.048 C 3.285 2.811 3.68 2.667 4.333 2.667 C 4.517 2.667 4.667 2.517 4.667 2.333 C 4.667 2.149 4.517 2 4.333 2 C 3.68 2 3.285 1.855 3.048 1.618 C 2.811 1.382 2.667 0.987 2.667 0.333 Z" fill="url(%23CBS1bzkxF-2031533640-linear-gradient)" height="4.66667px" id="CBS1bzkxF" transform="translate(0 2.667)" width="4.66667px"/><path d="M 2 0.333 C 2 0.149 1.851 0 1.667 0 C 1.483 0 1.333 0.149 1.333 0.333 C 1.333 0.756 1.239 0.984 1.112 1.112 C 0.984 1.239 0.756 1.333 0.333 1.333 C 0.149 1.333 0 1.483 0 1.667 C 0 1.851 0.149 2 0.333 2 C 0.756 2 0.984 2.094 1.112 2.222 C 1.239 2.35 1.333 2.578 1.333 3 C 1.333 3.184 1.483 3.333 1.667 3.333 C 1.851 3.333 2 3.184 2 3 C 2 2.578 2.094 2.35 2.222 2.222 C 2.35 2.094 2.578 2 3 2 C 3.184 2 3.333 1.851 3.333 1.667 C 3.333 1.483 3.184 1.333 3 1.333 C 2.578 1.333 2.35 1.239 2.222 1.112 C 2.094 0.984 2 0.756 2 0.333 Z" fill="url(%23Jd7AK81w9-2031533640-linear-gradient)" height="3.333333px" id="Jd7AK81w9" transform="translate(4 0)" width="3.3333399999999997px"/></g></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z M 4 8 L 4 12 C 4 13.105 4.895 14 6 14 L 10 14 M 12 18 C 10.895 18 10 17.105 10 16 L 10 12 C 10 10.895 10.895 10 12 10 L 16 10 C 17.105 10 18 10.895 18 12 L 18 16 C 18 17.105 17.105 18 16 18 Z" fill="transparent" height="18px" id="Ioh1JC5rr" transform="translate(3 3)" width="18px"><path d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z" fill="transparent" height="8px" id="ZrCrI93dV" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" width="8px"/><path d="M 0 0 L 0 4 C 0 5.105 0.895 6 2 6 L 6 6" fill="transparent" height="6px" id="emltWYAiE" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(4 8)" width="6px"/><path d="M 2 8 C 0.895 8 0 7.105 0 6 L 0 2 C 0 0.895 0.895 0 2 0 L 6 0 C 7.105 0 8 0.895 8 2 L 8 6 C 8 7.105 7.105 8 6 8 Z" fill="transparent" height="8px" id="WpBecYDfi" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" transform="translate(10 10)" width="8px"/></g></svg>)
01
Maak uw evenementtype
Stel uw evenement in Cal.com op met uw voorkeurinstellingen en beschikbaarheid.
02
Kies het type insluiting
Kies een formaat (in-line, pop-up, knop of e-mail) en kopieer de gegenereerde code.
03
Pas je embed aan en publiceer
Voeg de code toe aan uw website of app. Uw planner is direct live!
01
Inline insluiten
Toon de boekingskalender direct in uw paginalay-out. Dit is de populairste en meest naadloze optie voor realtime planning op uw website.
02
Drijvende pop-up knop
Gebruik een permanente knop die een planningsmodal opent. Verhoogt de conversie zonder je website-ontwerp te verstoren.
03
Pop-up via element klik
Koppel de embed aan een aangepast element zoals een knop of afbeelding. Beheer precies hoe en wanneer gebruikers het boekingsproces starten.
03
E-mail insluiten
Voeg gepersonaliseerde boekingslinks toe in e-mailcampagnes die een vooraf ingevuld boekingsformulier openen. Ideaal voor outreach en follow-ups.
1
// Stijl Atomen met Javascript
2
3
const uiterlijk = {
4
thema : Aangepast ,
5
variabelen : {
6
fontFamily : ' Comic sans ' ,
7
colorPrimary : ' #101010 ' ,
8
kleurAchtergrond : ' #ffffff ' ,
9
kleurTekst : ' #374151 ' ,
10
borderRadius : ' 6px ' ,
11
spacingUnit : ' 8px ' ,
12
}
13
} ;
14
const atomen = cal.atoms({ clientSecret, uiterlijk });
15
01
Verhoog de conversies van de website met ingebedde planning
Houd gebruikers op uw site en verminder het aantal afgebroken boekingen. Cal.com-embeds bieden een snellere, meer intuïtieve manier om bezoekers naar vergaderingen te converteren.
02
Stem uw merk af op aanpasbare inbeddingsformaten
Gebruik inline embeds, pop-ups of knoppen om af te stemmen op de lay-out en branding van uw site. Pas kleuren en stijlen aan om een naadloze ervaring te creëren.
03
Snelle setup en volledige controle
Genereer uw embedcode, plak deze in uw site en ga live. U beheert de volledige boekingsflow van begin tot bevestiging zonder gebruikers weg te sturen.
Dynamische insluitsnippetgenerator
Genereer code die is afgestemd op uw Cal.com opstelling, inclusief ondersteuning voor teams, zelf-gehoste omgevingen en geavanceerde routering.
Meerdere embedformaten
Kies tussen inline-weergaven, knoppen of modals, afhankelijk van hoe je de boekingsstroom wilt triggeren.
Voeg beschikbare tijdslots toe of beperk ze
Toon alleen specifieke tijdslotten in een embed op basis van de context of het type gebruiker. Beheer beschikbaarheid zonder je kern evenementinstellingen te veranderen.
Vul de velden van het boekingsformulier vooraf in
Gebruik queryparameters om automatisch naam, e-mail of aangepaste velden in te vullen voor een snellere en persoonlijkere boekervaring.
Volg UTM-parameters in embeds
Embed legt UTM-bron, medium, campagne en andere waarden vast, zodat je boekingen aan de juiste kanalen kunt toeschrijven.
Mobiel geoptimaliseerd recht uit de doos
Elke embed is responsief en werkt op verschillende schermformaten. Er is geen aanvullende configuratie nodig voor mobiele gebruikers.
Wat is Cal.com inbedden?
Cal.com Embed stelt je in staat om een volledig functionele planningswidget direct in je website of app te integreren, zodat gebruikers afspraken kunnen boeken zonder je site te verlaten. Je kunt de widget insluiten als een inline kalender, een zwevende pop-up knop, een pop-up die wordt geactiveerd door een specifieke elementklik, of een link in je e-mails. Deze naadloze integratie verbetert de gebruikerservaring en verhoogt de boekingsconversiepercentages door bezoekers betrokken te houden op je pagina.
Hoe embed ik Cal.com op mijn site?
Het integreren van Cal.com op uw website is eenvoudig. Maak eerst uw evenementtype aan en configureer de instellingen en beschikbaarheid in het Cal.com-dashboard. Zodra uw evenement is ingesteld, gaat u naar de Embed Snippet Generator in uw dashboard, selecteert u uw gewenste embed-formaat (inline, zwevende knop, klik-geactiveerde pop-up of e-mail embed), en kopieert u de gegenereerde code. Plak de code vervolgens direct in uw HTML, CMS of frontend-framework. Uw boekingswidget is direct live en klaar voor gebruik, volledig gesynchroniseerd met uw Cal.com-account.
Kan ik marketingcampagnes volgen met ingebedde boekingen?
Je kunt handmatig UTM-trackingparameters aan de embed-URL's toevoegen. Dit stelt je in staat om de bron, medium, campagne en andere belangrijke parameters bij te houden wanneer gebruikers met de boekingswidget interageren. Door UTM-parameters via de link door te geven, kun je boekingen toerekenen aan specifieke marketinginspanningen, campagnes of verkeersbronnen.
Kan ik gebruikersinformatie vooraf invullen in het boekingsformulier?
Ja, je kunt velden in het boekingsformulier vooraf invullen met behulp van URL-queryparameters. Dit betekent dat je velden zoals de naam van de gebruiker, e-mailadres of andere aangepaste velden die je hebt ingesteld automatisch kunt vullen. Bijvoorbeeld, je kunt een gepersonaliseerde boekingslink in een e-mail verzenden die al de naam en het e-mailadres van de gebruiker vooraf ingevuld heeft. Dit maakt het boekingsproces sneller en gebruiksvriendelijker, waardoor wrijving vermindert en de conversieratio's verbeteren. Leer meer over het vooraf invullen van formulieren in onze documentatie.
Welke embedformaten worden ondersteund?
Cal.com ondersteunt vier belangrijke insluitformaten om aan verschillende behoeften te voldoen:
Inline Embed: Toon de agenda direct binnen uw paginalay-out voor naadloze gebruikersinteractie.
Zwevende Pop-up Knop: Voeg een blijvende knop toe die de boekingsmodal opent zonder de paginalay-out te verstoren.
Pop-up via Element Klik: Open de planningsmodal vanuit elk aangepast element, zoals een knop of afbeelding.
Email Embed: Voeg een voorgevuld boekingsformulierlink toe in uw e-mails voor eenvoudig en persoonlijk plannen.
Elk formaat is ontworpen om flexibiliteit te bieden in hoe u uw planningssysteem weergeeft en ermee omgaat, afhankelijk van het ontwerp van uw website en de gebruikersstroom.
Kan ik bepalen welke tijdslots worden weergegeven in een insluiting?
Ja, je kunt de boekings-UI volledig aanpassen met behulp van Cal.com’s booker-atome. De booker-atome is een open-source, modulair component waarmee je je eigen boekingsproces kunt opbouwen en stylen. Je kunt de lay-out aanpassen, veldformulieren vervangen of de hele boekingservaring volledig herontwerpen om aan te sluiten bij de uitstraling van je merk. Door gebruik te maken van individuele booker-atomen zoals DatePicker, TimeSelector, en ContactForm, krijg je nauwkeurige controle over elk element van het boekingsproces. Dit geeft je de flexibiliteit om een op maat gemaakte en merkgebonden ervaring te creëren binnen je app of website. Voor meer details, bezoek onze documentatie van de booker-atome.
Werkt embed met zelfgehoste Cal.com?
Ja, de inbeddingsfunctie werkt met zowel cloud-gehoste als zelf-gehoste Cal.com-installaties. Of je nu de gehoste versie van Cal.com gebruikt of deze op je eigen infrastructuur implementeert, de inbeddingsfunctionaliteit blijft volledig operationeel. De snippetgeneratie is dynamisch afgestemd op basis van je setup, en je kunt deze configureren om naadloos binnen je zelf-gehoste omgeving te werken.
Integreer direct een online boekingswidget op je website met Cal.com
Begin vandaag met het embedden van planning op uw site. Geen plugins of omleidingen. Gewoon schone, snelle, hoogconverserende boekingen.
