Emerald Booking Widget

Widget booking engine untuk diintegrasikan ke website Anda tanpa iframe

Dokumentasi Singkat

Cara Menggunakan Widget

1. Tambahkan script dan stylesheet ke halaman Anda

<!-- CSS Modern dengan Font Garamond -->
<link rel="stylesheet" href="https://widget.emerald-system.id/css/emerald-booking-modern.css">
<link rel="stylesheet" href="https://widget.emerald-system.id/css/booking-page-fix.css">

<!-- JavaScript Widget -->
<script src="https://widget.emerald-system.id/widget/kalenderwidget.js"></script>

2. Tambahkan container untuk widget

<div id="booking-widget-container" data-hotel-id="1" data-api-url="https://api.emerald-system.id:11059/api"></div>

3. Inisialisasi widget

<script>
  document.addEventListener('DOMContentLoaded', function() {
    EmeraldBookingWidget.init({
      container: document.getElementById('booking-widget-container'),
      primaryColor: '#8B0000',
      mode: 'calendar', // 'calendar', 'search', atau 'full'
      language: 'id', // atau 'en' untuk Bahasa Inggris
      propertyCode: 'YOUR_PROPERTY_CODE',
      database: 'YOUR_DATABASE', // Biasanya sama dengan propertyCode
      widgetBaseUrl: 'https://widget.emerald-system.id',
      apiBaseUrl: 'https://api.emerald-system.id:11059/api',
      apiHeaders: {
        "Authorization": "Basic YWRtaW46YWRtaW4xMjM="
      },
      redirectSameTab: true, // Buka hasil di tab yang sama
      onSelect: function(data) {
        console.log('Tanggal terpilih:', data);
      }
    });
  });
</script>

4. Implementasi dengan Next.js

Jika Anda menggunakan Next.js, gunakan pendekatan berikut:

import { useEffect } from 'react';
import Head from 'next/head';

export default function BookingPage() {
  useEffect(() => {
    // Pastikan script sudah dimuat
    const script = document.createElement('script');
    script.src = 'https://widget.emerald-system.id/widget/kalenderwidget.js';
    script.async = true;
    script.onload = () => {
      // Inisialisasi widget setelah script dimuat
      if (window.EmeraldBookingWidget) {
        window.EmeraldBookingWidget.init({
          container: document.getElementById('booking-widget-container'),
          propertyCode: 'YOUR_PROPERTY_CODE',
          database: 'YOUR_DATABASE',
          apiBaseUrl: 'https://api.emerald-system.id:11059/api',
          widgetBaseUrl: 'https://widget.emerald-system.id',
          primaryColor: '#8B0000',
          language: 'id',
          mode: 'calendar'
        });
      }
    };
    document.body.appendChild(script);

    return () => {
      // Cleanup script saat component unmount
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, []);

  return (
    <>
      <Head>
        <title>Calendar Widget Example</title>
        <link rel="stylesheet" href="https://widget.emerald-system.id/css/emerald-booking-modern.css" />
        <link rel="stylesheet" href="https://widget.emerald-system.id/css/booking-page-fix.css" />
        <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet" />
      </Head>
      <div className="container mx-auto py-8">
        <h1 className="text-3xl font-bold mb-6">Booking Kamar Hotel</h1>
        <div id="booking-widget-container" className="bg-white rounded-lg shadow-lg p-6"></div>
      </div>
    </>
  );
}

5. Mode Widget Kalender

Widget Emerald Kalender menyediakan beberapa mode yang berbeda:

  • mode: 'calendar': Menampilkan kalender untuk pemilihan tanggal dengan tampilan visual.
    EmeraldBookingWidget.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'calendar',
  // Konfigurasi lainnya...
});
  • mode: 'search': Menampilkan form pencarian sederhana dengan input tanggal.
    EmeraldBookingWidget.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'search',
  // Konfigurasi lainnya...
});
  • mode: 'full': Menampilkan widget kalender lengkap dengan tombol navigasi dan tampilan penuh.
    EmeraldBookingWidget.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'full',
  // Konfigurasi lainnya...
});

Catatan Penting: Untuk halaman pemesanan berbasis kalender, gunakan mode: 'calendar' untuk memberikan pengalaman pemilihan tanggal yang optimal kepada pengguna.

6. Perbedaan mode Widget

Widget Emerald Booking menyediakan beberapa mode yang berbeda:

  • mode: 'full': Menampilkan widget lengkap dengan menu navigasi (jika showMenu: true) dan tampilan sesuai currentView.
    EmeraldBookingEngine.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'full',
  currentView: 'calendar', // atau 'booking'
  // Konfigurasi lainnya...
});
  • mode: 'calendar': Khusus menampilkan tampilan kalender untuk pemilihan tanggal.
    EmeraldBookingEngine.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'calendar',
  // Konfigurasi lainnya...
});
  • mode: 'search': Khusus menampilkan form pencarian sederhana.
    EmeraldBookingEngine.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'search',
  // Konfigurasi lainnya...
});

Catatan Penting: Untuk halaman booking, gunakan mode: 'full' dengan currentView: 'booking' untuk menampilkan proses booking lengkap.

Tampilan Widget Kalender

Tampilan Kalender

Preview Tampilan Calendar
Calendar
July 2024
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
August 2024
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Tampilan Calendar menyediakan antarmuka visual untuk memilih tanggal check-in dan check-out dengan mudah:

  • Kalender visual untuk dua bulan (bulan saat ini dan bulan berikutnya)
  • Pemilihan tanggal dengan klik langsung pada kalender
  • Input untuk jumlah tamu (dewasa dan anak-anak)
  • Tombol untuk langsung mencari kamar berdasarkan tanggal yang dipilih

Untuk mengaktifkan tampilan Calendar:

mode: 'calendar', // Tampilan widget kalender

Widget kalender akan langsung mengarahkan ke halaman ketersediaan kamar setelah pengguna memilih tanggal.

Fitur Tambahan

Desain Modern dengan Font Garamond

Widget hadir dengan desain modern yang elegan menggunakan font Garamond:

  • Tampilan yang lebih menarik dan profesional
  • Font Garamond yang elegan dan mudah dibaca
  • Animasi dan transisi halus untuk pengalaman pengguna yang lebih baik
  • Responsif untuk semua ukuran layar

Untuk menggunakan desain modern, tambahkan CSS:

<link rel="stylesheet" href="https://your-domain.com/css/emerald-booking-modern.css">

Member Points

Widget mendukung integrasi dengan sistem member points:

  • Pengecekan poin member berdasarkan nomor telepon
  • Menampilkan jumlah poin yang tersedia
  • Opsi untuk menggunakan poin untuk pemesanan saat ini
  • Perhitungan diskon berdasarkan poin yang digunakan

Untuk mengaktifkan fitur member points:

enableMemberPoints: true, // Aktifkan fitur member points

Metode Widget API

Anda dapat mengakses fungsi-fungsi berikut setelah menginisialisasi widget kalender:

// Mengatur tanggal
EmeraldBookingWidget.updateCalendarDates('checkIn', '2025-05-01');
EmeraldBookingWidget.updateCalendarDates('checkOut', '2025-05-03');

// Mengatur jumlah tamu
EmeraldBookingWidget.updateCalendarGuests('adults', 2);
EmeraldBookingWidget.updateCalendarGuests('children', 1);

// Melakukan pencarian secara manual
EmeraldBookingWidget.search();

// Mendapatkan data yang dipilih
EmeraldBookingWidget.getSelectedDates();

Fungsi Inisialisasi

Widget Emerald Kalender menyediakan fungsi inisialisasi berikut:

  • EmeraldBookingWidget.init(): Digunakan untuk menginisialisasi widget kalender pada halaman.
    EmeraldBookingWidget.init({
  container: document.getElementById('booking-widget-container'),
  mode: 'calendar',
  // Konfigurasi lainnya...
});

Catatan Penting: Pastikan container elemen sudah ada di DOM sebelum memanggil init().

Konfigurasi URL dan Domain

Pastikan untuk menggunakan URL dan domain yang benar dalam konfigurasi widget kalender:

// URL dan domain untuk widget
widgetBaseUrl: 'https://widget.emerald-system.id',  // Domain widget Anda

// URL API untuk mengakses data
apiBaseUrl: 'https://api.emerald-system.id:11059/api',  // URL API Emerald

// Path untuk file JavaScript dan CSS
// JavaScript: https://widget.emerald-system.id/widget/kalenderwidget.js
// CSS: https://widget.emerald-system.id/css/emerald-booking-modern.css
// CSS Fix: https://widget.emerald-system.id/css/booking-page-fix.css

Contoh Implementasi Lengkap

Berikut adalah contoh implementasi lengkap untuk halaman dengan widget kalender:

calendar.html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalender Reservasi | Hotel Emerald</title>
  
  <!-- Meta tags untuk SEO -->
  <meta name="description" content="Pilih tanggal menginap di Hotel Emerald dan temukan ketersediaan kamar.">
  <meta name="keywords" content="reservasi hotel, kalender hotel, hotel emerald">
  
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  
  <!-- CSS untuk Widget -->
  <link rel="stylesheet" href="https://widget.emerald-system.id/css/emerald-booking-modern.css">
  <link rel="stylesheet" href="https://widget.emerald-system.id/css/booking-page-fix.css">
  
  <!-- Font Garamond -->
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- CSS Kustom -->
  <style>
    body {
      font-family: 'EB Garamond', Georgia, serif;
      background-color: #f8f9fa;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    .header {
      background-color: #8B0000;
      color: white;
      padding: 20px 0;
      margin-bottom: 30px;
    }
    .footer {
      background-color: #333;
      color: white;
      padding: 30px 0;
      margin-top: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- Header -->
  <header class="header">
    <div class="container">
      <h1>Hotel Emerald</h1>
      <p>Pengalaman menginap terbaik untuk Anda</p>
    </div>
  </header>
  
  <!-- Main Content -->
  <main class="container">
    <h2 class="text-3xl font-bold mb-6">Reservasi Kamar Hotel</h2>
    <p class="mb-6">Silakan pilih tanggal check-in dan check-out untuk melihat ketersediaan kamar.</p>
    
    <!-- Container untuk Widget Kalender -->
    <div id="booking-widget-container" class="bg-white rounded-lg shadow-lg p-6 mb-8"></div>
    
    <!-- Informasi Tambahan -->
    <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
      <h3 class="text-2xl font-bold mb-4">Informasi Penting</h3>
      <ul class="list-disc pl-5">
        <li class="mb-2">Check-in mulai pukul 14:00</li>
        <li class="mb-2">Check-out sebelum pukul 12:00</li>
        <li class="mb-2">Sarapan tersedia mulai pukul 06:00 - 10:00</li>
        <li class="mb-2">Anak-anak di bawah 6 tahun menginap gratis</li>
      </ul>
    </div>
  </main>
  
  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>&copy; 2024 Hotel Emerald. All rights reserved.</p>
    </div>
  </footer>

  <!-- JavaScript Widget -->
  <script src="https://widget.emerald-system.id/widget/kalenderwidget.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Konfigurasi widget
      const widgetConfig = {
        container: document.getElementById('booking-widget-container'),
        propertyCode: 'YOUR_PROPERTY_CODE',
        database: 'YOUR_DATABASE',
        apiBaseUrl: 'https://api.emerald-system.id:11059/api',
        widgetBaseUrl: 'https://widget.emerald-system.id',
        primaryColor: '#8B0000',
        language: 'id',
        mode: 'calendar',
        redirectSameTab: true,
        apiHeaders: {
          "Authorization": "Basic YWRtaW46YWRtaW4xMjM="
        },
        onSelect: function(data) {
          console.log('Tanggal dipilih:', data);
          // Anda dapat melakukan sesuatu dengan data yang dipilih di sini
        }
      };
      
      // Inisialisasi widget kalender
      if (window.EmeraldBookingWidget) {
        window.EmeraldBookingWidget.init(widgetConfig);
      } else {
        console.error('Widget kalender tidak ditemukan. Pastikan script dimuat dengan benar.');
      }
    });
  </script>
</body>
</html>

Contoh di atas menunjukkan implementasi lengkap halaman dengan widget kalender untuk pemilihan tanggal. Anda dapat menyesuaikan desain dan konten sesuai kebutuhan.

Kesimpulan

Dengan mengikuti panduan di atas, Anda dapat dengan mudah mengintegrasikan widget kalender Emerald ke dalam website Anda. Beberapa poin penting yang perlu diingat:

  • Gunakan mode: 'calendar' untuk tampilan kalender lengkap.
  • Pastikan semua URL dan domain sudah benar (widget.emerald-system.id).
  • Tambahkan CSS tambahan untuk menyesuaikan tampilan widget dengan desain website Anda.
  • Manfaatkan event handler onSelect untuk menangani interaksi pemilihan tanggal.

Untuk melihat demonstrasi widget kalender dalam penggunaan nyata, silakan kunjungi halamanDemo.