# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.ditcal.com/widget/html-embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.