Support » Thema en CSS/opmaak » Widget verschijnt niet in geheel, maar in een smalle sectie met scroll functie

  • Beste,

    Ik ben een website aan het opzetten m.b.t. waxen.
    Hierbij maak ik gebruik van Treatwell.
    Zij hebben een widget, waardoor de klant vanuit je eigen website een afspraak kan boeken.
    Hiervoor krijg je een code die je in je html moet zetten.

    Ik maak gebruik van Elementor. Zowel bij het element ‘tekstverwerker’ en ‘html’ verschijnt er wel iets, maar niet in zijn geheel. Er moet dus in een smalle balk gescrollt worden en ik wil dat het volledig zichtbaar is. Maar ik kom er niet achter hoe ik dit voor elkaar krijg.

    Weet iemand hoe dit opgelost kan worden?
    PS momenteel staat er dat online boekingen niet beschikbaar zijn voor deze salon, maar dit zou morgen in moeten gaan.

    Met vriendelijke groet

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    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.

    Guido

    (@guido07111975)

    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

    Guido

    (@guido07111975)

    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

    Thread starter stacademy

    (@stacademy)

    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

    Guido

    (@guido07111975)

    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

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)