72 lines
2.7 KiB
Plaintext
72 lines
2.7 KiB
Plaintext
---
|
|
title: Adding embed to your webpage
|
|
---
|
|
|
|
<Frame className="aspect-video">
|
|
<iframe
|
|
width="100%"
|
|
height="100%"
|
|
src="https://www.youtube.com/embed/fMHW6jYPIb8?si=ohBU_CMRBWFrQx6L
|
|
title="YouTube video player"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
></iframe>
|
|
</Frame>
|
|
|
|
You can get the embed snippet, to install on your webpage, from the Embed Snippet Generator, within the app.
|
|
|
|
<Note>
|
|
{" "}
|
|
The snippets provided are automatically updated as per the cal.com instance. **So, even when self hosting, you
|
|
can simply copy and paste the snippets from there{" "}
|
|
</Note>
|
|
.
|
|
|
|
There are three ways in which you can embed your cal.com link to your webpage.
|
|
|
|
<img src="//images/i1600x900-APQPQxcN1aZt_m0casf.png" alt="Embed options overview" />
|
|
|
|
## Inline
|
|
|
|
Show the embed inline anywhere on the webpage. It let's you show the embed at a particular place in your webpage.
|
|
|
|
[CodeSandbox link[React]](https://codesandbox.io/s/inline-demo-react-for-docs-xps99g?file=/src/App.js)
|
|
[CodeSandbox link[HTML]](https://codesandbox.io/s/vanillajs-week-view-inline-y9wgxc?file=/index.html)
|
|
|
|
<Frame>
|
|
<img src="/images/i1600x900-RDSMehJ8vTwZ_zcals5.png" alt="Inline embed example" />
|
|
</Frame>
|
|
|
|
## Pop-up via element click
|
|
|
|
Show the embed, on click of any element on your webpage, in a popup
|
|
|
|
[CodeSandbox link[React]](https://codesandbox.io/s/element-click-popup-h5c5v2?file=/public/index.html)
|
|
[CodeSandbox link[HTML]](https://codesandbox.io/s/popup-on-click-of-an-existing-element-framework-agnostic-forked-7pl95c?file=/index.html)
|
|
|
|
<Frame>
|
|
<img src="/images/i1600x900-IQ6S7Rq9d94T_d5vl8m.png" alt="Pop-up embed example" />
|
|
</Frame>
|
|
|
|
## Floating button pop-up
|
|
|
|
Adds a floating button that can be customized and on clicking that the embed shows up in a popup.
|
|
|
|
[CodeSandbox link[React]](https://codesandbox.io/s/floating-button-popup-react-forked-9y5g95?file=/public/index.html)
|
|
[CodeSandbox link[HTML]](https://codesandbox.io/s/embed-floating-button-popup-framework-agnostic-mg7339?file=/src/index.js)
|
|
|
|
<Frame>
|
|
<img src="//images/i1600x900-PNSh9u2m_QV2_v80gvk.png" alt="Floating button embed example" />
|
|
</Frame>
|
|
|
|
## What can you embed?
|
|
|
|
- You can embed your cal.com link for an event type e.g. `rick/get-rick-rolled`. You can get the snippet from the event-type page.
|
|
- You can embed your profile page e.g. rick. For this, you can just update the snippet to replace your cal.com event type link with your username. e.g. `rick/get-rick-rolled => rick`
|
|
- You can embed your Routing Form e.g. `forms/YOUR_FORM_ID`. You can get the snippet for that from the Routing Form page.
|
|
|
|
<Frame>
|
|
<img src="//images/i1600x900-iihnWwzsuARg_llvldw.png" alt="Routing form embed example" />
|
|
</Frame>
|