You can embed Calendly in your Joomla site so visitors can schedule time with you right from your website. This guide shows you how to add the embed code using Joomla’s custom HTML options.
Before you begin
- Make sure you can add custom HTML to your Joomla site.
- Next, copy your embed code from Calendly.
Supported embed types
| Embed type | What it does |
| Inline embed | Shows the calendar directly on the page |
| Popup widget | Adds a floating button that opens the calendar |
| Popup text | Creates a link that opens the calendar |
Learn more about Calendly embed options.
Add Calendly to Joomla
You can add Calendly using a Custom HTML module or directly in an article. Choose the option that works best for your site.
Option 1 – Use a Custom HTML module
- In your Joomla admin panel, go to Extensions > Modules.
- Select New, then choose Custom.
- In the editor:
- Set Show Title and Position as needed.
- Select the Code or Tools button (may look like <>) to switch to HTML view.
- Paste your embed code.
- Save and publish the module.
- Visit your site to make sure the embed displays correctly.
Option 2 – Add Calendly to an article
- Go to Content > Articles.
- Edit the article where you want to add Calendly.
- Select the Code view button (<>) in the editor.
- Paste your embed code.
- Save and preview the article.
Tip: If Joomla removes <script> tags, go to Global Configuration > Text Filters to change your editor settings.
Example embed code
Here’s an example of an inline embed:
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>To embed a popup widget or popup text, copy the code directly from your Calendly account.
Troubleshooting
- If nothing shows up, check if your editor is removing scripts.
- Test your embed on both desktop and mobile.
- If you're using a dynamic template or extension, make sure the Calendly script loads properly.