================================================================================ HOTELBOOK — WordPress Integration Guide Version: 1.0.0 Author: Pinky Creative Studio (pinkycreativestudio.com) Support: hello@hotelbook.io ================================================================================ TABLE OF CONTENTS ───────────────── 1. Overview 2. Method A — Plugin (recommended, no coding) 3. Method B — functions.php snippet 4. Method C — Shortcode 5. Method D — Gutenberg Block 6. Widget configuration options 7. WooCommerce integration 8. Troubleshooting 9. FAQ ================================================================================ 1. OVERVIEW ================================================================================ HotelBook gives your hotel website a direct booking widget — guests can reserve rooms without leaving your site. You receive 100% of the payment. No commission to Booking.com, Airbnb, or any other OTA. Requirements: - WordPress 5.8 or higher - PHP 7.4 or higher - HTTPS (SSL certificate) — required for payment processing - Active HotelBook account (hotelbook.io) Your Hotel ID and API key are available in: HotelBook Dashboard → Settings → API & Integrations ================================================================================ 2. METHOD A — OFFICIAL WORDPRESS PLUGIN (RECOMMENDED) ================================================================================ Step 1: Install via WordPress admin ───────────────────────────────────── a. Log in to your WordPress admin panel (yoursite.com/wp-admin) b. Go to: Plugins → Add New c. Search for: "HotelBook Direct Booking" d. Click "Install Now" → then "Activate" Step 2: Configure ────────────────── a. Go to: Settings → HotelBook b. Enter your Hotel ID (found in HotelBook Dashboard → Settings) c. Enter your API Key d. Select your preferred widget theme (light / dark / auto) e. Select language (auto / en / nl / de / fr / pl / es) f. Save settings Step 3: Add widget to your page ──────────────────────────────── Option 1 — Shortcode in any page/post: [hotelbook] Option 2 — Gutenberg block: Add block → Search "HotelBook" → configure in block settings Option 3 — Widget area (sidebar/footer): Appearance → Widgets → drag "HotelBook Booking" to any widget area Done! The booking widget will appear on your page. ================================================================================ 3. METHOD B — MANUAL SNIPPET IN functions.php ================================================================================ If you prefer not to install a plugin, add this code to your theme's functions.php file (or a custom plugin). IMPORTANT: Replace YOUR_HOTEL_ID with your actual Hotel ID from the dashboard. ────────────────────────────── CODE START ────────────────────────────────────── HOTELBOOK_HOTEL_ID, 'theme' => HOTELBOOK_THEME, 'lang' => HOTELBOOK_LANG, 'currency' => HOTELBOOK_CURRENCY, 'position' => HOTELBOOK_POSITION, ) ) ), 'before' ); } add_action( 'wp_enqueue_scripts', 'hotelbook_enqueue_widget' ); /** * Shortcode: [hotelbook] or [hotelbook theme="dark" lang="nl"] */ function hotelbook_shortcode( $atts ) { $atts = shortcode_atts( array( 'hotel_id' => HOTELBOOK_HOTEL_ID, 'theme' => HOTELBOOK_THEME, 'lang' => HOTELBOOK_LANG, 'width' => '100%', 'class' => '', ), $atts, 'hotelbook' ); return sprintf( '
', esc_attr( $atts['class'] ), esc_attr( $atts['hotel_id'] ), esc_attr( $atts['theme'] ), esc_attr( $atts['lang'] ), esc_attr( $atts['width'] ) ); } add_shortcode( 'hotelbook', 'hotelbook_shortcode' ); /** * Optional: Add HotelBook booking page to WordPress menu automatically. * Remove this function if not needed. */ function hotelbook_add_to_nav_menu( $items, $args ) { if ( $args->theme_location === 'primary' ) { $items .= '
  • Book Now
    • '; } return $items; } // Uncomment the line below to enable auto-menu addition: // add_filter( 'wp_nav_menu_items', 'hotelbook_add_to_nav_menu', 10, 2 ); ────────────────────────────── CODE END ──────────────────────────────────────── HOW TO EDIT functions.php: Option 1 (admin): Appearance → Theme Editor → functions.php Option 2 (FTP): Access via FTP, edit wp-content/themes/YOUR-THEME/functions.php Option 3 (safer): Create a custom plugin file: wp-content/plugins/hotelbook-custom/hotelbook-custom.php Add the code there (requires standard WordPress plugin header) ================================================================================ 4. METHOD C — SHORTCODE USAGE ================================================================================ After adding the code from Method B (or installing the plugin), use the shortcode [hotelbook] anywhere in your pages or posts. Basic usage: [hotelbook] With custom options: [hotelbook theme="dark" lang="nl"] [hotelbook theme="light" lang="en" width="600px"] Available shortcode attributes: hotel_id — Override Hotel ID (defaults to your configured ID) theme — 'light', 'dark', or 'auto' (follows system preference) lang — 'auto', 'en', 'nl', 'de', 'fr', 'pl', 'es', 'it' width — Widget width, e.g. '100%', '600px', '500px' class — Additional CSS class(es) for the wrapper div Example in Elementor/Divi/Beaver Builder: Add a "Shortcode" widget/module and paste [hotelbook] ================================================================================ 5. METHOD D — GUTENBERG BLOCK (Requires Plugin) ================================================================================ With the HotelBook plugin activated: 1. Edit any page in the Gutenberg editor 2. Click the "+" button to add a new block 3. Search for "HotelBook" 4. Click the block to insert it 5. In the right sidebar, configure: - Theme (light/dark/auto) - Language - Show/hide room images - Widget width 6. Save/Update the page ================================================================================ 6. WIDGET CONFIGURATION OPTIONS ================================================================================ All options can be set via data attributes on the widget container, in functions.php constants, or through the plugin settings panel. ┌─────────────────────┬───────────────────────────────────┬─────────────────────┐ │ Option │ Values │ Default │ ├─────────────────────┼───────────────────────────────────┼─────────────────────┤ │ data-hotel-id │ Your Hotel ID (string) │ Required │ │ data-theme │ light / dark / auto │ auto │ │ data-lang │ auto/en/nl/de/fr/pl/es/it │ auto │ │ data-currency │ EUR / GBP / USD / PLN │ EUR │ │ data-position │ inline / floating / modal │ inline │ │ data-primary-color │ Hex color (e.g. #1A8FE3) │ #1A8FE3 │ │ data-show-photos │ true / false │ true │ │ data-show-reviews │ true / false │ true │ │ data-min-nights │ Number (e.g. 2) │ 1 │ │ data-max-nights │ Number (e.g. 30) │ 365 │ │ data-cancellation │ flexible / moderate / strict │ flexible │ └─────────────────────┴───────────────────────────────────┴─────────────────────┘ Example with all options:
    ================================================================================ 7. WOOCOMMERCE INTEGRATION ================================================================================ HotelBook can optionally use WooCommerce for processing payments on WordPress. Requirements: - WooCommerce 7.0+ - WooCommerce Payments or Stripe for WooCommerce plugin - HotelBook Pro or Enterprise plan Setup: 1. In HotelBook Dashboard → Settings → Integrations → select "WooCommerce" 2. A new WooCommerce product "Hotel Room Booking" will be created automatically 3. Each booking creates a WooCommerce order (for unified reporting) 4. Use WooCommerce's built-in payment gateways Note: This integration is optional. HotelBook works perfectly without WooCommerce using its native Stripe/Mollie/PayPal integration. ================================================================================ 8. TROUBLESHOOTING ================================================================================ ISSUE: Widget not appearing ──────────────────────────── ✓ Check your Hotel ID is correct (Dashboard → Settings) ✓ Ensure HTTPS is enabled on your site ✓ Check browser console (F12) for JavaScript errors ✓ Deactivate other plugins one by one to find conflicts ✓ Clear WordPress cache (WP Rocket, W3TC, LiteSpeed Cache, etc.) ✓ Ensure the page has the [hotelbook] shortcode or the div container ISSUE: Payments not working ───────────────────────────── ✓ Verify your Stripe/Mollie/PayPal keys in HotelBook Dashboard → Payments ✓ Ensure your site has a valid SSL certificate ✓ Check that you're not in "Maintenance Mode" ✓ Test with a card number from Stripe test mode: 4242 4242 4242 4242 ISSUE: Widget appears twice ───────────────────────────── ✓ Remove duplicate shortcodes ✓ Disable the auto-enqueue and use only the shortcode method ISSUE: Styling conflicts with theme ──────────────────────────────────── ✓ The widget uses Shadow DOM isolation — most conflicts are prevented ✓ If issues persist, add to your theme's CSS: .hotelbook-widget-container { all: initial; } ✓ Use a higher specificity wrapper: #hotelbook-wrapper { font-family: inherit; } ISSUE: Slow loading ───────────────────── ✓ The widget script is loaded asynchronously — it should not block rendering ✓ Enable CDN in HotelBook Dashboard → Settings → Performance ✓ Use WordPress caching plugins for page speed ================================================================================ 9. FREQUENTLY ASKED QUESTIONS ================================================================================ Q: Does this work with page builders (Elementor, Divi, Beaver Builder)? A: Yes. Use the [hotelbook] shortcode in any shortcode module/widget. Elementor users can also use the "HTML" widget and paste the
    directly. Q: Can I translate the widget? A: Set data-lang="nl" (or other language code) or use data-lang="auto" to detect the browser's language automatically. Q: Is the widget GDPR compliant? A: Yes. All data is stored in EU (Amsterdam). We provide a DPA on request. The widget sets no tracking cookies. You control all guest data. Q: Can I customize the widget colors? A: Yes. Use data-primary-color="#YOUR_COLOR" to match your brand. Enterprise plan includes full CSS customization. Q: Do I need to modify my theme files? A: No. The shortcode method requires zero theme modifications. Q: What happens if HotelBook is down? A: We maintain 99.9% uptime SLA. The widget fails silently — your page remains fully functional. We notify you of any incidents at status.hotelbook.io ================================================================================ SUPPORT ================================================================================ Email: hello@hotelbook.io Help Center: docs.hotelbook.io Status page: status.hotelbook.io Live chat: Available in HotelBook Dashboard (Pro & Enterprise plans) ================================================================================ Pinky Creative Studio — pinkycreativestudio.com Template: HotelBook SaaS v1.0 — PREMIUM SAAS TEMPLATE ================================================================================