3rd party booking widget thing

I Need Help
1

Hi all,

I’m updating the booking system used on a restaurant website – the client has changed to a different provider (SevenRooms).

I want to add their ‘widget’ to the site and have been given the following code, which I’ve entered into a script snippet:

<div id="sr-res-root" class="sr-sm sr-dark sr-#000000">Reservations</div>
<script src="https://www.sevenrooms.com/widget/embed.js"></script>
<script>
SevenroomsWidget.init({
    venueId: "nameofrestaurant",
    triggerId: "sr-res-root", // id of the dom element that will trigger this widget
    type: "reservations", // either 'reservations' or 'waitlist' or 'events'
    styleButton: true, // true if you are using the SevenRooms button
    clientToken: "" //(Optional) Pass the api generated clientTokenId here
})
</script>

This doesn’t work, it opens a pop-up/modal but content doesn’t load. Any idea what I may be doing wrong?

In case it’s helpful, here’s the code from the previous provider, which worked absolutely fine:

<div class="container-12 w-container">
        <div id="Resy-Widget" class="html-embed w-embed w-script">
            <a href="https://resy.com/cities/glc/restaurantname" id="resyButton-896bolJfITtzkixKPJw-_">Book your table on Resy</a>
 
            <script src="https://widgets.resy.com/embed.js"></script>
            <script>
            resyWidget.addButton(document.getElementById('resyButton-896bolJfITtzkixKPJw-_'), {
                "venueId": 53305,
                "apiKey": "C5So7Q9G9iDntelT3bWZKFQ7ZojYpkvl",
                "replace": true,
            });
            </script>
        </div>
    </div>

Would be super grateful if any of you could point me in the right direction. The SevenRooms tech support were completely useless…

2

Assuming you replaced the venue ID in the code, you will need to check the browser console for any errors. The browser inspector is your best friend, especially if you are making websites commercially

1 Like
4

Thanks Pete, I have indeed replaced the venu ID. Didn’t think to check the browser inspector though, so thanks very much for that tip (I was merely previewing from within the Blocs app) – the browser tells me that it

Failed to load resource: the server responded with a status of 404 (Not Found)
https://www.sevenrooms.com/widget/res-widget.embed.js.map

so presumably that’s a problem at SevenRooms’ end…?

5

Thanks Jerry. The direct link works absolutely fine. Do you know if Blocs has the ability to load that directly within the modal? If so perhaps I could kinda make my own widget… (the client doesn’t want users to leave the website to book)

7

Thank you – that’s what I’ll do! I appreciate the help.