Wat ze bieden is geen normaal ‘widget’, maar een iframe oplossing. Dat heeft z’n beperkingen en vooral in het responsive tonen op je site. Dat gaat dus niet mooi werken op ieder toestel (denk hierbij aan smartphone of tablet gebruikers).
Je kan ook op andere problemen stoten zoals mensen die externe sites niet inladen op een site zoals CORS beveiliging in browsers. Ik zou dus aanbevelen een andere oplossing te zoeken die je beter in je eigen (rechtstreeks) site kunt integreren.
Hoi,
In de code staat een iframe-tag met deze CSS:
style="border: none; width: 100%; height: 100%;"
De hoogte moet je aanpassen naar een vaste waarde zoals:
height: 300px;
En vergeet niet je site ook even in kleiner / mobiel scherm te bekijken, om zo de beste hoogte te bepalen.
Maar misschien dat je tijdens het genereren van die iframe code ook zelf een hoogte kunt invoeren? Want dat is beter dan deze fix.
Guido
Ik zie nu dat Jeroen mij net voor was. En hij heeft gelijk, een iframe op je site plaatsen is niet de beste methode.
Guido
Hoi,
Bedankt voor de reacties. Helaas is dit het enige wat ze naast de ‘boek nu’-knop code hebben.
De code die ik krijg is echter als volgt:
<script src="https://widget.treatwell.nl/common/venue-menu/javascript/widget-button.js?v1"></script>
<script>
(function()
{ var link = document.createElement("link"); link.type = "text/css"; link.href = "https://widget.treatwell.nl/common/venue-menu/css/widget-button.css"; link.rel = "stylesheet"; link.media = "screen"; document.getElementsByTagName("head")[0].appendChild(link); }
());
</script>
<div
id="wahanda-online-booking-widget-iframe"
data-widget-url="https://widget.treatwell.nl/salon/415252/menu/"
></div>
Ik zie niet wat je in je antwoord zette, namelijk :
style=”border: none; width: 100%; height: 100%;”
Daardoor kan ik het niet aanpassen om uit te proberen. Tenzij ik iets over het hoofd zie?
Mvg,
Talitha
Hoi Talitha,
Ik merk dat die CSS door dat script zelf wordt gegenereerd. Dus mijn eerdere fix werkt niet.
Voeg dit eens toe op pagina Extra CSS van de Customizer in je dashboard:
#wahanda-online-booking-widget-iframe iframe {height:300px !important;}
Guido
