Widget

Voorbeeld als Widget

Voorbeeld als button

Click hier! om te bepalen of u naar de dokter moet

Met deze widget kunt u zelf de de digitale zelftriage tool van Moet Ik Naar De Dokter integreren in uw eigen website.

Hiervoor heeft u wel een toegangssleutel nodig. Om een sleutel aan te vragen kunt u contact opnemen met ons.

Voorwaarde

De widget wordt direct op uw website geïntegreerd, dus niet via een iframe. Dat betekent dat de styling en layout invloed heeft op de widget. Andersom heeft de widget geen invloed op uw website. U dient zelf zorg te dragen dat de integratie zo optimaal mogelijk is. Mocht u toch vragen hebben of advies nodig hebben neem dan contact op met ons.

Optimaal gebruik van de widget

Voor het optimaal gebruik van de widget, is het belangrijk om de widget op de juiste manier in uw website design te plaatsen. Moet ik naar de dokter heeft wetenschappelijk bewezen dat een groot gebruik van de widget door patienten kan leiden tot een vemindering in het aantal contacten en het verkorten van de gespreksduur aan de telefoon.

Om u te helpen met de juiste plaatsing van de widget in uw website hebben wij een design richtlijn opgesteld. Deze kan u hier vinden.

Content Security Policy (CSP)

Voor de werking van de widget worden de onderstaande domeinen gebruikt. Als er gebruikt gemaakt wordt van CSP moeten deze ook toegevoegd worden.

Domein Informatie
moetiknaardedokter.azurewebsites.net Het domein waarop de widget / JavaScript gehost wordt.
api.moetiknaardedokter.nl Het standaard domein voor fetch/xhr requests.
minddapim.azure-api.net Het domein waarop teruggevallen kan worden voor fetch/xhr requests.
minddstorage.blob.core.windows.net Het domein waarvan plaatjes geladen worden in de widget.

De code

Volg de volgende stappen om de widget te integreren op uw website. Enig kennis van HTML en JavaScript is vereist.

Stap 1; voeg de container toe.

Dit is de plek waar de widget wordt ingeladen op uw website. Kies een eigen id wanneer nodig en voeg styling inline of via uw eigen css toe.

<div id="mindd_widget_embedded"></div>

Stap 2; voeg library toe.

Dit bevat de programmacode; ter informatie dit is een ReactJS UMD applicatie. Voeg deze onder aan uw pagina toe of in de <head >

<script src="https://moetiknaardedokter.azurewebsites.net/embed/index.js"></script>

Stap 3; initialiseer de applicatie.

Voeg deze code toe of integreer deze code met uw eigen JavaScript om de applicatie te starten.

<script> window.addEventListener('DOMContentLoaded', function() { window.mindd.init({ ApiKey: '%%UW_API_SLEUTEL_HIER%%', target: '#mindd_widget_embedded', type: 'widget', accent_color: '#16B4AD', welcome_text: { NL: '**Voordat u belt, doorloop eerst deze vragen.** \n\n Wij voorzien u direct van advies', // markdown support EN: '**Before you call, first answer our questions.** \n\n We will give you an advice' // markdown support }, open: false, modalDisplayMode: 'full', // dialog, full (default) widget_showWelcomeText: true, widget_background: 'transparent', widget_foreground: '#fff', showLanguageSelector: true, defaultLanguageCode: 'NL', getSessionSummaryUsingForm: false, startQuestionType: 'gender', // age, gender (default) startWithAbcdTriage: false, labels: { QuestionWhatGender: { NL: "Bent u een man of een vrouw?", EN: "Are you (the patient) a man or a woman?" }, QuestionWhatSearchTriage: { NL: "Waar heeft u last van?", EN: "What is bothering you?" } }, branding: { termsOfUseUrl: "https://www.moetiknaardedokter.nl/gebruikersvoorwaarden/", //(default) layout: "top", name: "Huisartsenpost MINDD", phone_label: "0123 - 456789", phone_number: "012356789", font_family: "Montserrat" }, sessionTimeOutInSec: 0, clickOutsideModalClosesModal: false }); }); </script>

Er moeten een aantal parameters ingesteld worden:

ApiKey Uw eigen sleutel zoals deze aan u verstrekt is vanuit ons.
target De id van het element zoals u deze heeft toegevoegd in stap 1
type Het type integratie die u wil gebruiken; 'button' of 'widget' (zie ook voorbeelden op deze pagina). In het geval van een 'button' gebruik dan iets als: <a href="#test" id="mindd_button" class="button"> Start triage </a> met in dit geval de parameters:
target: '#mindd_button',
type: 'button'

accent_color De hex code van de kleur die u in de widget wil gebruiken. let erop dat deze voldoende contrast heeft met de achtergrondkleur.
welcome_text De tekst van de eerste zin kunt u aanpassen naar eigen inzicht. Het moet opgegven worden als object met een optie voor elke ondersteunde taal. Als een taal niet opgegeven is en wel gekozen wordt in de taalselectie wordt een standaard tekst gebruikt. Standaard is (voor nu) Hallo, ik kan u helpen met bepalen of u naar de dokter moet.

Deze optie ondersteunt Markdown opmaak. dus wanneer u het volgende invult ;**Voordat u belt, doorloop eerst deze vragen.** \n\n Wij voorzien u direct van advies dan wordt dit

<strong>Voordat u belt, doorloop eerst deze vragen.</strong> <p>Wij voorzien u direct van advies</p>

open Boolean (true/false) of de app bij laden van de pagina meteen moet openen of niet.
modalDisplayMode Een waarde die instelt of de widget start als fullscreen applicatie of als modal dialog met doorzichtige achtergrond. De waarde kunnen "dialog" of "full" zijn (standaard is "full").
widget_showWelcomeText Boolean (true/false), default true. U kunt er voor kiezen dat de widget, zodra deze nog niet geopend is de welcome_text niet toont; bijvoorbeeld wanneer u dit zelf in uw eigen website regelt.
widget_background U kunt er voor kiezen dat de widget, zodra deze nog niet geopend is een bepaalde achtergrond kleur moet hebben. Standaard is achtergrond.
widget_foreground U kunt er voor kiezen dat de widget, zodra deze nog niet is geopend een bepaalde tekstkleur heeft. Standaard is donkergrijs.
showLanguageSelector Of het taalselectie control getoond moet worden, heeft standaard waarde 'true'. Ook de taalselectie tonen in de kanaalinstellingen moet aan staan.
defaultLanguageCode De standaard taal die gebruikt wordt door de widget. Of de taalselectie getoond wordt is afhankelijk van de kanaalinstellingen.
getSessionSummaryUsingForm Aan het einde van een triage of na een contactverzoek wordt de optie geboden om het verslag te downloaden. Standaard wordt dat met JavaScript gedaan, maar als deze parameter op "true" gezet wordt dan word een form-tag gebruikt met een POST.
startQuestionType Geldige waardes zijn 'gender' en 'age'. De standaard waarde is 'gender', de widget begint dan met de vraag naar het geslacht van de gebruiker. Met de waarde 'age' word begonnen met de vraag naar de leeftijd van de gebruiker.
startWithAbcdTriage Als het veld op 'true' staat is de begin nog steeds 'gender' en daarna 'age'. Daarna wordt eerst de ABCD-triage uitgevraagd. Als de ABCD-triage niet eindigt in een advies wordt het de zoekvraag getoond en kan gezocht worden naar een ingangsklacht.
Labels Moet ik naar de dokter zorgt ervoor dat de woorden en zinnen zo optimaal en correct mogelijk worden gebruikt. Voor sommige labels (op dit moment alleen QuestionWhatGender en QuestionWhatSearchTriage!) is het mogelijk om zelf uw eigen variatie aan te brengen bv: labels: { QuestionWhatGender: { NL: "Bent u een man of een vrouw?", EN: "Are you (the patient) a man or a woman?" }, QuestionWhatSearchTriage: { NL: "Waar heeft u last van?", EN: "What is bothering you?" } }
Branding U kunt uw eigen naam en telefoonnummer laten tonen boven in het moet-ik-naar-de-dokter venster. U kunt ook uw eigen gebruikersvoorwaarden tonen ipv de algemene van moetiknaardedokter. branding: { termsOfUseUrl: "https://www.moetiknaardedokter.nl/gebruikersvoorwaarden/", // (default) layout: "top", // null of "top" name: "Huisartsenpost MINDD", // naam van uw organisatie phone_label: "0123 - 456789", // telefoonnummer dat getoond wordt (leesbaar formaat) phone_number: "012356789", // telefoonnummer om de draaien (nodig voor als de gebruiker er op drukt), font_family: "Montserrat" // Allowed values are 'Montserrat', 'Arial', 'Verdana', 'Calibri' or 'Roboto'. When not supplied it defaults to 'Montserrat'. } Als u dit gebruikt, gebruik dan s.v.p. uw eigen naam en telefoonnummer in plaats van de voorbeelden hierboven.

forceInitialStateEmpty Boolean (true/false), default false. onthoud geen persoonlijke data zoals geboortedatum of naam in geval van doorsturen naar doctor. Zodat bij "opnieuw" en sluiten openen die velden opnieuw ingevoerd dienen te worden.
sessionTimeOutInSec De tijd in seconden waarna de sessie verlopen is en de widget opnieuw wordt gestart. Dit om te voorkomen dat een patiënt de ingevulde gegevens van de vorige patiënt (die bij de zuil is weggelopen) kan zien. Default is er geen time-out (0 seconden), bij een waarde groter dan 0 gaat de timer aan.
clickOutsideModalClosesModal Boolean (true/false), default false. Als dit op true wordt gezet zorgt het klikken naast de modal dialog voor het sluiten van die modal (net zoals het klikken op het kruisje rechtsboven). Dit is alleen van toepassing bij modalDisplayMode: 'dialog'.
Custom styling Omdat de widget onderdeel is van andere website kan het voorkomen dat de styling van de website en die van de widget met elkaar conflicteren. CSS classnames wijzigen per release van de widget en om die reden worden er data-minddclass attributen aan element toegekend; deze blijven per release gelijk. Ze kunnen gebruikt worden om mogelijk styling conflicten op te lossen. De styling hooks kunnen met een attribute selector worden aangeroepen. Bijvoorbeeld: div[data-minddclass='button'] { color:black; } Wees hiermee voorzichtig, en controleer altijd of de widget nog goed werkt en of alle teksten goed leesbaar zijn.

Custom events De widget ondersteunt events waarop een handler kan worden geregistreerd. Voor de events kunnen ook callbacks geregistreerd worden via configuratie bij de init aanroep. Dit zijn de events:
  • Widget geopend
  • Widget gesloten; inclusief 'finished' veld die aangeeft of de triage is afgerond of niet en 'sessionId' veld die het ID van de sessie bevat.
  • Taalswitch; inclusief informatie wat de geselecteerde taal was en wat de nieuw geselecteerde taal is.

Met 'callback' methode:

onWidgetOpened: function () { console.log("Widget was opened"); }, onWidgetClosed: (finished, sessionId, urgence) => { console.log(`Widget was closed. Was triage finished: ${finished}. Session ID was ${sessionId}, Urgence was: ${urgence}`); }, onLanguageChanged: function (previousLanguage, newLanguage) { console.log(`Language changed from ${previousLanguage.code} to ${newLanguage.code}`); }

Met 'event' methode:

const el = document.getElementById("mindd_widget_embedded"); el.addEventListener("minddWidgetOpened", (e) => { console.log("Widget was opened"); }); el.addEventListener("minddWidgetClosed", (e) => { console.log(`Widget was closed. Was triage finished: ${e.detail.finished}. Session ID was ${e.detail.sessionId}`); }); el.addEventListener("minddWidgetLanguageChanged", (e) => { console.log(`Language changed from ${e.detail.previousLanguage.code} to ${e.detail.newLanguage.code}`); });