Use our web components

We provide a web component to integrate the Vyte slot picker directly in your website. This is a fully configurable Vue.js component with the following props:

Properties

• emails string required if no users is passed

  Email of the person whose availabilities you want to show (Vyte account required). You can pass a list of emails by comma separating them. Slots returned will be slots when all of those users are available.

• users string required if no emails is passed

  Vyte user._id of the person whose availabilities you want to show (Vyte account required). You can pass a list of user_ids by comma separating them. Slots returned will be slots when all of those users are available.

• availability string

  The _id of a specific availability you want to use for those slots. This availability could match a specific appointment type for instance.

• ndays number default is 5

  Number of days you want the view to show.

• timezone string required

  The timezone you want the availabilities displayed in. It must be expressed according to TZ database name.

• duration string default is 30

  Duration in minutes.

• lang string default is english

  Language and locale of the component. It is expressed according to ISO 639-1 and the available languages are : fr, en, es, it, pt, de, sv, nl.

• one-column boolean default is false

  If you want the slots to be displayed on 1 column (vs 1 column per day).

• start date defaults to today

  Start date expressed according to ISO 8601.

• start-at-first-availability boolean default is false

  If you want the first date to jump to the first day that has an available slot..

• nslots number

  Number of slots max shown per day by default. The user can then click on a "view more slots" button to see all the slots available.

The following code shows you how to integrate our web component easily:

<!-- Optional scripts if you want compatibility with older browsers like IE11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/unfetch/polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/custom-event-polyfill@1.0.6/polyfill"></script>
<!--/ optional scripts -->
<!-- Mandatory dependency scripts -->
<!-- If you were already loading them for another component of your page no need to load them twice -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/document-register-element@1.13.1/build/document-register-element.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-custom-element@3.2.6/dist/vue-custom-element.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<!--/ Mandatory dependency scripts -->
<!-- Web component -->
<script src="https://assets-cdn.vyte.in/wc/vyte-slot-picker/dist/js/app.js"></script>
<link
  rel="stylesheet"
  type="text/css"
  href="https://assets-cdn.vyte.in/wc/vyte-slot-picker/dist/css/app.css"
/>
<!--/ Web component -->

<vyte-slot-picker
  id="vyte-slot-picker"
  emails="martin@vytein.com"
  :ndays="5"
  timezone="Europe/Paris"
  lang="en"
>
</vyte-slot-picker>

<script>
  function slotSelectedHandler(event) {
    const slot = event.detail[0];
    const startDate = new Date(slot.start.dateTime);
    const endDate = new Date(slot.end.dateTime);
    console.log("Slot selected", startDate, endDate);
  }
  const element = document.getElementById("vyte-slot-picker");
  element.addEventListener("slot-selected", slotSelectedHandler);
</script>