---
title: "Calendly"
slug: "calendly-widget"
updated: 2026-04-17T07:21:59Z
published: 2026-04-17T07:21:59Z
canonical: "learn.servitly.com/calendly-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendly

Loads a [Calendly](https://calendly.com/) scheduling page directly in your DPS.

With this widget, you can easily provide your users with a shared calendar where they can book a support meeting.

![Calendly](https://components-manager.servitly.com/components/Calendly_1/IMAGES/_screenshot?owner=AG_Servitly)

By selecting the day, you can specify the time slot, and finally you can leave notes about the scheduled event.

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            <calendly-widget calendlyUrlPath="my-calendly-path" calendlyName="my-calendly-name"></calendly-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Calendly `&lt;calendly-widget&gt;`

| *Calendly Name* | The name of the calendar to embed, if missing, the user must select the target one. **Name**: calendlyName **Type**: STRING \| Optional `calendlyName="abc"` |
| --- | --- |
| *Calendly URL Path* | The ULR Path of the calendly being embedded (https://calendly.com/<PATH>). **Name**: calendlyUrlPath **Type**: STRING \| Optional `calendlyUrlPath="abc"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<calendly-widget    
    calendlyUrlPath="abc"
    calendlyName="abc"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></calendly-widget>
```