Copy page

Recipes

WordPress

Mellow Booking is Mellow's WordPress plugin. It puts the widget on pages with a block or a shortcode, keeps the rental and the keys in one settings page, and makes a WordPress page for each car type. It needs WordPress 6.5 and PHP 7.4.

Connect the plugin

1. Install and activate Mellow Booking.
2. In Mellow, open Settings · Widget and the widget. Under Show more, press Copy CMS link.
3. In WordPress, open Settings → Mellow Booking and paste the link into CMS link. The plugin reads the rental and the channel from it, and shows them below the box.
4. Copy the live key from the widget's Install card, and the test key from its Test card, into Live key and Test key.
5. In Mellow, add the WordPress site's address to the widget's Sites.
6. Press Save Changes. The plugin reads the car types at once.

While Test mode is on, every page books with the test key: no car is held and no money moves. The test key also works on a WordPress on your own machine. Switch Test mode off before customers book.

Terms page picks a WordPress page with your terms: the driver step then asks the customer to accept them. Booking page picks the page with the whole booking, where a car type page's Book goes. Until you pick one, the plugin uses the first published page that holds the booking block or [mellow_booking].

A booking page

Add the Mellow booking block to a page, or the shortcode:

Code
[mellow_booking]

The block's sidebar sets the same things as the attributes: what to show (the whole booking or a search only), the language, the look, the steps, one page per step, the terms page, the payment (on this page or on the processor's page), where the step is kept, and Keep the theme's styles out (isolate).

The shortcode takes the root's attributes: locale, preset, steps, paths, url-state, pay, return-url, terms and isolate. Write them with a hyphen or an underscore. The rental and the key always come from the settings page, never from a shortcode.

Code
[mellow_booking locale="de" steps="search car-type insurance driver pay done"]

Your own markup inside the shortcode goes inside <mellow-booking>, as on any site. See Your own markup.

A search on the home page

Code
[mellow_search action="/book/" layout="row"]

It takes locale, preset, action, layout and car-type. The search sends the customer to the page in action, where the booking shortcode or block sits. With car-type, it searches for that one car type and shows its price, as a car type page does.

Car type pages

The plugin keeps one Car type post for each car type the widget sells, under Car types in the admin menu. It reads them from Mellow every hour, and at once on Sync now on the settings page.

• A post's title is the car type's name in Mellow. Its address is /car-types/<slug>/, with the slug from Mellow. Car type address on the settings page changes the first part.
• Write the page's own text in the post's editor. Mellow keeps the facts.
• The page shows your text, then the car type's picture, its facts and its features from Mellow, then a search for that car type. Once the customer picks the dates, the search shows the price and Book, which opens your booking page with the car type chosen. When it is not free, it says so and offers the other car types for the same dates. A site with no booking page yet keeps the whole booking on the car type's page.
• A car type that leaves the widget in Mellow moves its post to draft. It comes back when the car type does.

In a theme template

A theme template can hold the shortcode, such as for a page whose layout the editor must not change. This block theme template, templates/page-reserve.html in a child theme of Twenty Twenty-Five, shows the booking on the page with the slug reserve, in Icelandic and with no extras step:

Code
<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-title {"level":1} /-->
  <!-- wp:shortcode -->
  [mellow_booking steps="search car-type insurance driver pay done" locale="is"]
  <!-- /wp:shortcode -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

In a classic theme, a PHP template such as page-reserve.php does the same:

Code
<?php get_header(); ?>
<main>
  <?php echo do_shortcode( '[mellow_booking steps="search car-type insurance driver pay done" locale="is"]' ); ?>
</main>
<?php get_footer(); ?>

Tried: on 2026-10-20, in WordPress Playground (WordPress 7.1, Twenty Twenty-Five) against a local Mellow with the test key: the settings page and its sync, [mellow_search] on the home page, [mellow_booking] on /book/ to "Test booking", a car type page, and the block theme template above. Not tried here: the classic PHP template, the block's sidebar, and the live key on a real https site. Mellow checked the block when the plugin was built.