Shortcodes & widgets

How to put JetBookIn on your website: every shortcode and Elementor widget with all its options, which page each belongs on, how to match your brand colours, how multilingual sites work, and – for developers – the REST API, hooks and WP-CLI commands.

The pages you need

A typical JetBookIn site has these pages. Every block can be placed with a shortcode (any theme or editor) or with the matching Elementor widget.

A setup for a small villa with three apartments can be as simple as: the home page with the Search Hero and the rooms grid, one page per apartment (built automatically), and the confirmation page. A 20-room hotel usually adds a Book page with the results, so the search on every page leads there.

Booking confirmation and checkout pages

Two settings in JetBookIn → Settings → General tell JetBookIn where guests go:

The confirmation page shows, depending on how it is opened: the checkout for a stay chosen in a booking box; the guest’s booking (from a link with the booking reference and key); or the Find your booking form. You never need more than one such page per language. What guests can do there is described in The guest’s booking page.

To find a page’s ID, open it in Pages; the number after post= in the address bar is the ID.

Themes can adapt the page around the booking with two body classes: jbi-is-checkout while the guest is still booking, and jbi-is-booking once there is a booking to show – for example to hide a “Thank you” heading during checkout.

Booking shortcodes

These blocks are interactive: they load availability and prices live and need JavaScript (visitors without it see Please enable JavaScript to book online.). For yes/no attributes, anything other than no counts as yes.

[jetbookin_search] – search form

Dates and guests, then a search button. Without a results page the results open under the form.

[jetbookin_search results_url="/book/" button="Check availability"]

[jetbookin_results] – search results and checkout

Lists the room types free for the chosen dates with their rates, lets the guest pick one or more rooms, and runs the checkout. If nothing is free it suggests other dates.

[jetbookin_booking] – room booking box

Calendar, guests, rates and price for one room type. Reserve continues on the checkout page with the stay filled in.

[jetbookin_booking room="42" months="2"]

[jetbookin_calendar] – availability calendar

[jetbookin_confirmation] – booking confirmation / manage booking

No attributes. [jetbookin_manage] does exactly the same. Put it on one page only (per language) and set that page as the Booking confirmation page ID.

[jetbookin_search_hero] – full-width hero with search

[jetbookin_search_hero image="https://example.com/wp-content/uploads/pool.jpg" heading="Three stone houses above Elounda" subheading="Book direct for the best price" results_url="/book/"]

Room and property shortcodes

These are rendered on the server (good for speed and search engines). Where an attribute takes a room type, leaving it out uses the room type whose page is being shown; property attributes fall back to the current property, the current room’s property, or your first property.

When a block has nothing to show (no photos, no amenities…), guests see nothing; logged-in staff and the Elementor editor see a hint saying what to fill in.

[jetbookin_rooms] – rooms grid or carousel

[jetbookin_rooms layout="carousel" columns="3" orderby="price" amenities="0"]

[jetbookin_room_gallery]

[jetbookin_room_amenities]

[jetbookin_room_specs]

[jetbookin_room_price]

The lowest nightly price from your rates, e.g. from €95 / night.

[jetbookin_room_policies]

[jetbookin_property_info]

Review shortcodes Pro

Both need the Guest reviews module; with it off they show nothing.

[jetbookin_reviews] – published reviews

The average score with its label (e.g. Excellent), review cards with your replies, a Show more button, and schema.org rating data for search engines.

[jetbookin_reviews limit="3" bars="yes" empty="Be the first to review your stay."]

[jetbookin_review] – review form

No attributes. Only needed if you want guests to review on a page of their own: put it there and enter the page’s ID as Review page ID in Bookings → Reviews. Otherwise guests review on the booking confirmation page. The form opens from the signed link in the review e-mail.

Housekeeping and owner pages Pro

• [jetbookin_housekeeping] (Housekeeping module): the daily cleaning list on a phone, for logged-in users with the Housekeeper role and booking managers. Others are asked to log in or told they have no access. Housekeepers are sent to this page after logging in.
• [jetbookin_owner] (Owners & statements module): an owner’s monthly statements and occupancy calendar, for logged-in users with the Property Owner role linked to a property. Owners are sent here after logging in instead of wp-admin.

Neither has attributes. Both pages are kept out of page caches automatically. Create each as a normal, published WordPress page.

Room pages without a page builder

Each room type has its own page on your site. If it is not built with Elementor, JetBookIn turns it into a complete room page by itself: the photo gallery (a mosaic from five photos), guests / beds / size, the “from” price, your description, amenities, policies and the booking box – beside the details on wide screens, below them on phones.

If the room’s content already contains a [jetbookin_room_…] shortcode, only the booking box is added at the end; if it contains [jetbookin_booking], nothing is added. With Elementor, design a single template for room types in the Theme Builder and use the room widgets with — Current room type —.

Elementor widgets

In the Elementor editor, search for JetBookIn or open the JetBookIn category in the widget panel. Each widget renders exactly the same block as its shortcode.

Content controls

Columns are responsive: by default 3 on desktop, 2 on tablet and 1 on phones, and you can set each device separately.

Style controls

Every JetBookIn widget has a Colors & shape section in the Style tab:

• Primary (buttons, selection), Button text, Background, Text, Borders – colours;
• Corner radius – 0 to 24 px;
• Typography – font family, size, weight and so on for the whole widget.

Some widgets have more:

• Rooms Grid / Carousel: Card (Background, Shadow, Padding), Room title and Price (typography and colour).
• Room Amenities: Icons (Color, Size).
• Room Price From: Price (typography and colour).
• Search Hero: Heading and Subheading (typography and colour).
• Reviews: Review title and Review text (typography and colour).

Tip: set the same Primary colour on the booking widgets of the page. The Finish booking button that appears for unpaid bookings takes its colours, corners and font from the booking widget on the page.

Colours and styling

All JetBookIn blocks read their colours and shapes from CSS variables set on the .jbi-widget wrapper. The Elementor style controls set these same variables. Without Elementor, set them in Appearance → Customize → Additional CSS or your theme’s stylesheet.

The variables are defined on .jbi-widget itself, so set them with a selector at least as strong, for example:

/* Sea-blue buttons, square corners, everywhere */
body .jbi-widget {
	--jbi-primary: #0e5e6f;
	--jbi-on-primary: #ffffff;
	--jbi-radius: 4px;
}

/* A dark booking box in one section only */
.booking-dark .jbi-widget {
	--jbi-surface: #1f1d1a;
	--jbi-surface-2: #2a2723;
	--jbi-text: #f4f1ea;
	--jbi-muted: #b9b4aa;
	--jbi-border: #3a3631;
}

Setting the variables on body or :root alone has no effect, because .jbi-widget sets its own defaults.

Multilingual sites (Polylang, WPML)

JetBookIn works with Polylang and WPML. Translations of a room type or property are the same room: they share availability, prices, bookings, the gallery and the main image. Guests see everything in the language of the page they book on, and get their e-mails and booking page in that language.

What to translate

• Room types and properties: translate them with your multilingual plugin (title, description, excerpt). On a property’s translation you also write its check-in instructions in that language.
• The booking confirmation page and, if you use one, the Book / checkout page: create a translation of each with the same shortcode or widget. Only the original’s ID goes into Settings; JetBookIn sends guests to the translation in their language.
• Terms and privacy pages and the review page: translate them the same way. Checkout opens the version in the guest’s language.
• Pages with search, rooms and reviews: translate them as normal pages; the shortcodes and widgets stay the same.

If a page has no translation, the original is used.

Names you type in the dashboard

Rate plan names, extras (name and description), promotions, custom fees and the bank transfer details are registered as strings: in Polylang under Languages → Translations (group JetBookIn), in WPML under String Translation (domain JetBookIn). Rate plans, extras and promotions also have In other languages fields right under their name in the dashboard; both places stay in step. An empty translation shows the original.

E-mails

E-mail texts are edited per language in Settings → E-mails, not with the multilingual plugin. See E-mails → One text per language.

Developers: REST API

Everything the dashboard does goes through the REST API under the namespace jetbookin/v1, e.g. https://example.com/wp-json/jetbookin/v1/availability/search. Staff endpoints need a logged-in user with the manage_jetbookin capability (administrators and the Booking Manager role) – a cookie with a REST nonce, or an Application Password for apps and other servers. The busier public endpoints (checkout, quotes, guest actions, reviews) are rate-limited per client.

Main public endpoints

Staff endpoints include /bookings (list, create, PUT /bookings/{id}, cancel, payments, payment requests, messages), /calendar, /quote, /settings, /emails, /reviews and /ical/connections. Payment providers call their own webhook routes in the same namespace.

Developers: hooks

All JetBookIn hooks start with jbi/. Use them from a small plugin or your child theme’s functions.php.

Actions

Filters

// Allow two unpaid bookings per e-mail address.
add_filter( 'jbi/max_open_holds', fn() => 2 );

// Post every confirmed booking to another system.
add_action( 'jbi/booking_confirmed', function ( array $booking ) {
	wp_remote_post( 'https://example.com/hook', [ 'body' => [ 'ref' => $booking['ref'] ] ] );
} );

// Rooms are hotel rooms for search engines.
add_filter( 'jbi/structured_data_room_type', fn() => 'HotelRoom' );

The fixed alert e-mails can be overridden by copying admin-conflict.php, admin-sync-failing.php or admin-late-payment.php into yourtheme/jetbookin/emails/.

Developers: WP-CLI

On live sites a real server cron is recommended instead of WordPress’s visitor-triggered cron, for example every 5 minutes:

*/5 * * * * cd /path/to/wordpress && wp jetbookin run-jobs --quiet

See Advanced settings for background jobs.

Questions

The booking box shows nothing.

Outside a room type’s own page it needs room="ID" (in Elementor: choose the Room type). Also check that the room type is published and has rates.

Search sends guests to the wrong page.

Set results_url on the search (or Results page in the widget) to the page with [jetbookin_results]. Without it, results open under the form.

My colours don’t change.

Set the variables on .jbi-widget (for example body .jbi-widget { … }), not only on body or :root. Clear any CSS cache or optimisation plugin afterwards.

Can I use the shortcodes in Gutenberg, Divi or Bricks?

Yes. Add a Shortcode block (or your builder’s shortcode element) and paste the shortcode.

Do I need a separate checkout page?

No. If Checkout page ID is empty, the booking box continues on the booking confirmation page. A dedicated Book page with the results is useful when you also want a search page.

I deleted the Booking confirmation page by mistake.

Create a page with [jetbookin_confirmation], publish it, and enter its ID as Booking confirmation page ID in Settings → General. Links in e-mails sent before still point to the old address, so send affected guests their booking link again if needed.