Angular

import { Component, OnInit } from "@angular/core";

declare const MedosBooking: {
  init: (config: Record<string, unknown>) => void;
  open: (config?: Record<string, unknown>) => void;
  close: () => void;
};

@Component({
  selector: "app-booking",
  standalone: true,
  template: `
    <button (click)="open()">Book appointment</button>
    <div id="medos-booking-inline" style="min-height: 600px"></div>
  `,
})
export class BookingComponent implements OnInit {
  ngOnInit() {
    const script = document.createElement("script");
    script.src = "https://widgets.medos.one/v2/unified.js";
    script.onload = () => {
      MedosBooking.init({
        apiKey: "mk_your_publishable_key",
        mode: "inline",
        containerId: "medos-booking-inline",
      });
    };
    document.body.appendChild(script);
  }

  open() {
    MedosBooking?.open();
  }
}