ZenTables Widget v2.0

Widget de reservation - Mode modal et pleine page

Mode Modal (ancre en bas a droite)

<!-- Container -->
<div id="zentables-widget" class="zentables-widget"></div>

<script>
ZenTables.init({
    apiUrl: 'https://modules.businessme.app/zentables/api/widget',
    token: 'VOTRE_TOKEN'
});
</script>

Mode Pleine Page

<!-- Container avec classe fullpage -->
<div id="zentables-widget" class="zentables-widget fullpage"></div>

<script>
ZenTables.init({
    apiUrl: 'https://modules.businessme.app/zentables/api/widget',
    token: 'VOTRE_TOKEN'
});
</script>

Integration complete (Modal)

<!-- Ajouter dans le <head> -->
<link rel="stylesheet" href="https://modules.businessme.app/zentables/widget/zentables-widget.css">

<!-- Ajouter le container -->
<div id="zentables-widget" class="zentables-widget"></div>

<!-- Ajouter avant </body> -->
<script src="https://modules.businessme.app/zentables/widget/zentables-widget.js"></script>
<script>
ZenTables.init({
    apiUrl: 'https://modules.businessme.app/zentables/api/widget',
    token: 'VOTRE_TOKEN',
    maxGuests: 10  // optionnel
});
</script>

Integration WordPress (Pleine Page)

Collez ce code dans un bloc HTML personnalise sur votre page WordPress "Reservations"

<!-- ZenTables Widget - Mode Pleine Page -->
<style>
.zentables-wrapper {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 20px;
}
</style>

<link rel="stylesheet" href="https://modules.businessme.app/zentables/widget/zentables-widget.css">

<div class="zentables-wrapper">
    <div id="zentables-widget" class="zentables-widget fullpage"></div>
</div>

<script src="https://modules.businessme.app/zentables/widget/zentables-widget.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    ZenTables.init({
        apiUrl: 'https://modules.businessme.app/zentables/api/widget',
        token: 'VOTRE_TOKEN'
    });
});
</script>