Med Muntras bokningswidget kan patienter boka tider direkt från klinikens hemsida. Widgeten visas antingen som en knapp som öppnar ett bokningsfönster, eller som ett inbäddat formulär direkt på sidan.
Klinikens domän måste vitlistas av Muntra innan widgeten fungerar. Kontakta Muntras support och ange exakt vilken domän widgeten ska användas på.
Widgeten kräver två saker: ett <div>-element där widgeten ska synas, och ett <script>-element som laddar widgetens kod.
<body>
<!-- Placera div-elementet där widgeten ska visas -->
<div
class="muntra-widget"
key="0"
muntra_clinic_id="DIN_KLINIK_ID"
muntra_referral_source="dinklinik.se"
></div>
<!-- Skriptet ska placeras precis före </body> -->
<script type="text/javascript" src="https://muntra-dev.github.io/index.js"></script>
</body>Ange attributen direkt på <div>-elementet.
| Attribut | Obligatoriskt | Beskrivning |
|---|---|---|
class | Ja | Måste innehålla muntra-widget. Lägg till primary, secondary eller without-modal för att underlätta CSS-styling av enskilda widgetar. |
key | Ja | Unikt ID per widget på sidan (t.ex. 0, 1, 2). Krävs om du har flera widgetar på samma sida. |
muntra_clinic_id | Ja | Klinikens ID i Muntra. |
muntra_referral_source | Nej | Domännamnet som bokningskällan ska registreras under (t.ex. dinklinik.se). Används för spårning. |
muntra_caregiver_id | Nej | Visar enbart en specifik behandlare. |
muntra_role_id | Nej | Filtrerar behandlare efter roll (t.ex. tandläkare, tandhygienist). |
muntra_procedure_id | Nej | Förväljer en behandling i bokningsflödet. |
muntra_button_text | Nej | Anpassad text på bokningsknappen. Standard: Boka tid. |
muntra_without_modal | Nej | Sätt till true för att visa widgeten direkt på sidan, utan knapp och utan popup-fönster. |
show_caregiver | Nej | Sätt till false för att dölja behandlarval i widgeten. |
muntra_locale | Nej | Språk för widgeten (t.ex. nb-no för norska). Standard: klinikens språk. |
goal_page_url | Nej | Webbadress dit patienten skickas efter en genomförd bokning. |
Du kan placera flera widgetar på samma sida. Ge varje widget ett unikt key-värde och kombinera attribut för att visa olika behandlare, roller eller behandlingar.
<!-- Widget för tandläkare -->
<div class="muntra-widget" key="0"
muntra_clinic_id="DIN_KLINIK_ID"
muntra_role_id="3"
muntra_button_text="Boka tandläkartid"></div>
<!-- Widget för tandhygienist -->
<div class="muntra-widget" key="1"
muntra_clinic_id="DIN_KLINIK_ID"
muntra_role_id="4"
muntra_button_text="Boka tandhygienist"></div>
<script type="text/javascript" src="https://muntra-dev.github.io/index.js"></script>När en patient bokar via widgeten skickas ett mejl med en länk i formatet:
https://www.dinklinik.se?m_id=XXXXXXXXXXOm den länken leder till en sida med bokningswidgeten visas bokningsuppgifter med knappar för bekräftelse och ombokning. (Huruvida ombokning är tillåten styrs av klinikens bokningsinställningar i Muntra.)
Knappens utseende anpassas via CSS-klassen .muntra-widget-button:
.muntra-widget-button {
border-radius: 100px;
color: #ffffff;
font-size: 18px;
font-weight: 700;
}Använd de extra klasserna på <div>-elementet (t.ex. secondary) för att styla enskilda knappar:
.secondary .muntra-widget-button {
background-color: #fff;
border-color: #52a8ff;
color: #52a8ff;
}Widgetfönstret (när muntra_without_modal="true") stylas via .muntra-widget:
.muntra-widget.without-modal {
width: 100%;
max-width: 720px;
height: 500px;
border: 1px solid lightgrey;
border-radius: 15px;
}muntra_clinic_id — är det rätt klinik-ID?muntra_referral_source — matchar det exakt det domännamn som är vitlistat?<script>-taggen måste stå efter alla <div>-element, helst precis före </body>.<iframe>.muntra.<div> ligger inuti ett <iframe>-element.<iframe>-taggen och ersätt den med en vanlig <div>.