How to set up direct booking on your website

Tired of paying 15-20% in commissions to Airbnb, Booking.com, and other OTAs on every reservation? With Nowistay’s Direct Booking feature, you can accept reservations directly on your own website, keeping full control of your business, your guest relationships, and your revenue.

This guide walks you through the complete setup: configuring your booking widget, setting up payments and taxes, embedding it on your website, and managing direct bookings.

Prerequisites

Before you can use Direct Booking, make sure you have:

• At least one property connected with Nowistay PMS
• An active AI Channel Manager subscription
• A connected Stripe account for payment processing

You can verify and set up all of these from the Integrations page in your Nowistay dashboard.

Step 1: Access the Direct Booking configuration

1. Go to Integrations from the left-hand menu.
2. Find "Direct Booking" in the list. It should appear as "Active" if you meet all prerequisites.
3. Click "Configure" to open the Direct Booking panel.

The panel lets you select a property, choose a language, and copy the embed code for your website.

Step 2: Configure your widget settings

Click the settings icon (gear icon) at the top-right of the Direct Booking panel to customize your widget.

Payment mode

Choose how guests pay for their booking:

• Full payment: The guest pays 100% of the total amount at the time of booking.
• Split payment: The guest pays a percentage upfront (e.g., 30%), and the remaining balance is automatically charged to their card before arrival.

If you choose Split payment, you can configure:

• First payment (%): The percentage charged at booking time (between 10% and 90%).
• Days before arrival for second payment: How many days before check-in the remaining balance is charged automatically (1 to 60 days).

Appearance

• Primary color: Choose a hex color that matches your brand. This will be used for buttons and highlights in the booking widget.
• Font family: Pick from Roboto, Inter, Open Sans, Lato, Montserrat, or Poppins.

Terms & conditions

Add your Terms & conditions URL to display a mandatory checkbox in the booking form. Guests will need to accept your terms before completing their reservation.

Click "Save settings" when done.

Step 3: Set up taxes

You can configure taxes for each property individually. These taxes are automatically calculated and added to the booking total shown to your guests.

1. In the Direct Booking panel, select the property you want to configure.
2. Click the "Taxes" button.
3. You'll see a list of existing taxes. Click "+ Add tax" to create a new one.

For each tax, you need to configure:

• Tax name: A descriptive name (e.g., "City Tax", "VAT", "Tourist Tax").
• Type: Percentage (%) or Fixed amount in your currency.
• Value: The tax rate (e.g., 5 for 5%) or fixed amount (e.g., 2.50).
• Applied per:
  • Per stay: Applied once to the entire booking.
  • Per night: Multiplied by the number of nights.
  • Per guest per night: Multiplied by both the number of guests and the number of nights.

You can add as many taxes as needed. They will all appear in the price breakdown shown to your guests during the booking process.

Step 4: Copy the embed code and choose a language

Back in the main Direct Booking panel:

1. Select your property from the dropdown.
2. Choose the language for the booking widget. Supported languages: English, French, Spanish, German, Italian, Dutch, Portuguese, Russian, and Chinese.
3. Click the "Copy" button next to the embed code.

The embed code looks like this (<REPLACE_WITH_YOUR_TOKEN> will be your own token):

To display the widget in a different language, simply change the Language dropdown: the embed code updates automatically with the correct language.

You can embed multiple widgets in different languages on separate pages of your website. For example, use an English widget on your English page and a French widget on your French page. Each uses the same property token, just with a different language code.

Step 5: Add the widget to your website

The embed code works on any website that supports custom HTML. Here's how to add it on the most popular website builders:

WordPress

1. Edit the page where you want the booking widget to appear.
2. Add a "Custom HTML" block (Gutenberg editor) or switch to the "Text" tab (Classic editor).
3. Paste the embed code.
4. Save or publish the page.

Webflow

1. Open your page in the Webflow Designer.
2. Add an "Embed" element (found under "Components" in the left panel).
3. Paste the embed code into the code editor.
4. Save and publish your site.

Wix

1. Open your page in the Wix Editor.
2. Click "Add Elements" then "Embed & Social" then "Custom embed" then "Embed a widget".
3. Click "Enter code" and paste the embed code.
4. Resize the element to fit your page layout.
5. Publish your site.

Squarespace

1. Edit your page and add a new "Code" block.
2. Paste the embed code.
3. Click "Apply" and save the page.

Any other website

If you have access to the HTML source of your website, simply paste the embed code wherever you want the booking widget to appear. The script will automatically create an iframe and load the booking form.

Here's an example of a property website with the Direct Booking widget embedded:

Step 6: Set up discounts

You can set up discounts depending on the length of the stay:

1. Select your property from the dropdown.
2. Click the "Discounts" button.
3. Click "Add discount".
4. Choose the length of the stay for which you want to apply a discount (from 2 nights to 12 weeks).
5. Choose a discount percentage to apply.

Discounts will be automatically applied to the booking total. Discount is applied to the total nights net rate before adding cleaning fees and taxes. The guest sees the discount in the total breakdown.

One widget for all your properties

If you manage several properties, you don't need to embed a separate widget for each one. The Direct Booking panel also offers an "All properties" mode that generates a single widget showing all your properties on one page.

Set it up

1. In the Direct Booking panel, switch from "Single property" to "All properties" at the top of the panel.
2. Select the properties to include in the widget. You can search by name, and use "Select all" to include everything.
3. Choose the widget language, click "Copy" to get the embed code, then add it to your website exactly as described in Step 5.

What your visitors see

The widget displays all the selected properties with their photo, city, capacity, and a "from X/night" starting price, so visitors can see the budget for each property at a glance.

A search bar lets visitors pick their check-in and check-out dates and the number of guests. The widget then shows which properties are available for those dates, each with the total price for the stay, so visitors can compare and choose. Properties that are too small for the group or not free on those dates are clearly marked as unavailable.

Clicking "Book" on a property opens its booking flow with the dates and number of guests already filled in. The guest reviews the price breakdown and completes the payment, exactly like with the single-property widget. They can also return to the list at any time to pick another property.

The appearance settings (color and font), payment mode, taxes, and discounts you configured in the previous steps apply to this widget too.

How it works for your guests

Here's the step-by-step experience for a guest booking directly on your website:

1. Browse availability and select dates

The widget displays a calendar with available dates and nightly prices. Your guest selects their check-in and check-out dates. Unavailable dates are automatically grayed out, and minimum/maximum stay restrictions are enforced.

2. Choose the number of guests

The guest selects how many people will be staying, up to the maximum capacity you've configured for the property.

3. Review the price and enter personal information

The widget displays a detailed price breakdown: nightly rate for each night, discounts, cleaning fee, applicable taxes, and total amount. The guest then fills in their information: first name, last name, email, phone, and optionally their address.

A notice informs the guest that the dates are held for 30 minutes while they complete the booking.

If you configured a terms & conditions URL, the guest must check the acceptance box before proceeding.

4. Complete the payment

After clicking "Book & Pay", the guest is redirected to a secure Stripe checkout page. They can pay with credit card, debit card, and any other payment methods you have enabled on your Stripe account (Klarna, Bancontact, iDEAL, etc.).

5. Booking confirmed

Once the payment is completed, everything happens automatically:

• The booking is created in your Nowistay dashboard.
• The dates are blocked across all connected channels (Airbnb, Booking.com, etc.) to prevent double bookings.
• A cleaning task is generated automatically if you have cleaning automation enabled.
• Both you and the guest receive a confirmation email with all the booking details.

Create a manual direct booking with payment request

Sometimes a guest contacts you directly (by phone, email, or social media) and wants to book. Instead of having them go through your website widget, you can create a manual booking and send them a payment request by email.

How it works

1. Go to the Bookings section from the left-hand menu.
2. Click "Create Booking".
3. Select the property and fill in the dates, guest information (email is required), pricing details, and currency.
4. Check the "Request payment from guest" option.
5. Click "Create".

The payment flow

• The guest receives an email with a secure payment link.
• The booking appears with a pending payment status in your dashboard.
• The payment link is valid for 35 minutes. The guest clicks it and pays on a secure Stripe checkout page.
• Once paid, the booking is automatically confirmed: dates are blocked on all channels and cleaning tasks are created.

If the payment expires

If the guest doesn't complete the payment in time, the link expires. You can generate a new payment link from the booking details. The guest will receive a fresh email with an updated link. This can be done as many times as needed until the guest completes the payment.