HTML embed

DitCal Embed Booking Link

DitCal provides an embed booking link that allows users to integrate their scheduling page directly into their website. This embed link seamlessly inherits the height and width of its container, making it responsive and adaptable to different layouts.

Embedding the Booking Link

To embed the DitCal booking link, use the following HTML <iframe> code snippet:

<div style="width: 100%; height: 600px; max-width: 800px; margin: auto;">
    <iframe src="https://your-ditcal-url.com/booking" 
            style="width: 100%; height: 100%; border: none;" 
            allowfullscreen>
    </iframe>
</div>

Key Features:

• Responsive Design: The booking link will automatically resize to fit the dimensions of its container.

• Customizable Container: You can set the width and height of the container to control how the booking page appears on your website.

• Seamless Integration: The iframe ensures the scheduling page is embedded smoothly without additional styling requirements.

Finding the Embed Code

The embed code for your booking link can be found under the Event Type Settings in the Embed section. Copy and paste the provided code snippet to integrate it into your website easily.

Customizing the Container

You can modify the <div> around the iframe to control its dimensions. For example:

• To make it full-screen:

  <div style="width: 100vw; height: 100vh;">
      <iframe src="https://your-ditcal-url.com/booking" style="width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
  </div>

• To embed within a fixed section:

  <div style="width: 500px; height: 400px;">
      <iframe src="https://your-ditcal-url.com/booking" style="width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
  </div>

Security Considerations

Ensure that your website allows embedding from DitCal and that your X-Frame-Options or Content-Security-Policy headers do not block iframe embedding.

For additional customization or troubleshooting, refer to DitCal's support documentation or contact our support team.