Skip to main content

How to Embed Your WeTravel Trip in Your WordPress Site

Updated yesterday

You can embed WeTravel widgets, such as the Book Now button, Pricing Packages, Trip Overview, and the Reviews widget, directly into your WordPress website. This lets your visitors explore your trips and complete their booking without ever leaving your site.

Because WordPress supports a variety of editors, page builders, and themes, this guide covers multiple ways to add your WeTravel embed depending on your setup.

💡 Important: The embedded checkout popup (iFrame overlay) requires JavaScript and is supported on WordPress.org and WordPress.com Premium plans or higher. It is not supported on WordPress.com Free or Personal plans.


Before You Begin

To embed a WeTravel widget, you first need to copy its code.

Get Your WeTravel Embed Code

  1. Log in to your WeTravel account.

  2. Open the trip you want to embed.

  3. Go to Promote → Embed.

  4. Select your widget (Book Now, Pricing Packages, Trip Overview, Reviews, etc.).

  5. Click Copy Code.

  6. You will paste this code into your WordPress page, post, or template using one of the options below.

Add the Embed Code to Your WordPress Site

Choose the section that matches your editor or page builder.

Option 1: Block Editor (Gutenberg)

(Default editor in modern WordPress)

  1. In your dashboard, go to Pages or Posts.

  2. Edit the page where you want to embed the widget.

  3. Click the + icon to add a block.

  4. Search for and select Custom HTML.

  5. Paste your WeTravel embed code into the block.

  6. Click "Preview" to verify that the widget loads correctly.

  7. Click Publish or Update

Option 2: Classic Editor or Classic Block

If your site uses the Classic Editor plugin or the classic block inside Gutenberg:

  1. Open the page or post

  2. Switch from Visual to Text mode (or choose Edit as HTML in a Classic block)

  3. Paste your WeTravel embed code.

  4. Switch back to Visual if needed.

  5. Save and Preview

  6. Click Update or Publish

Option 3: Elementor Page Builder

  1. Create or edit a page with Elementor.

  2. Add an HTML Code block to the page.

  3. Paste your WeTravel embed code into the widget.

  4. Click Update.

  5. Preview the page to ensure the widget loads properly.

Option 4: Divi Builder

  1. Open your page using the Divi Builder.

  2. Add a Code Module.

  3. Paste your WeTravel embed code inside the module.

  4. Save the module.

  5. Click Publish or Update.

Dynamic Conditions Note:

Divi’s conditional logic allows you to show or hide the module based on ACF fields, categories, and more.

Option 5: Other Page Builders (WPBakery, Beaver Builder, etc.)

Most page builders support an HTML or Code module.

  1. Edit your page

  2. Add an HTML, Code, or Raw HTML module.

  3. Paste your WeTravel embed code.

  4. Save and publish.

  5. Preview to confirm everything is working.


Embedding WeTravel Widgets in WordPress Templates (For Developers)

If you use custom templates (for example, a custom post type such as “Trips”), you may want the WeTravel widget to appear automatically on each trip page.

A common approach is to store the WeTravel Trip UUID in a custom field and conditionally load the widget in the template.

Step 1: Install and enable Advanced Custom Fields (ACF)

  1. Go to Plugins → Add New.

  2. Search for Advanced Custom Fields.

  3. Install and activate.

Step 2: Create a UUID field

  1. Go to Custom Fields → Add New

  2. Create a field group (e.g., “WeTravel Trip Details”)

  3. Add a field called Trip UUID.

    • Type: Text

  4. Assign it to your Trip post type.

  5. Publish the field group.

Your editors can now enter the trip’s WeTravel UUID directly in WordPress.

Step 3: Add conditional logic in the template

In your theme’s template file (e.g., single-trip.php), you can conditionally display the WeTravel embed if a UUID is present.

Example snippet:

This keeps your layout consistent:

UUID = show WeTravel widget

No UUID = show your original layout or CTA

We can help you rewrite this snippet for the desired widget.

If You Cannot Edit Template Files — Use a Code Snippet

Some themes do not expose their template files. In that case, you can use a Code Snippets plugin.

  1. Install the WordPress Code Snippets plugin.

  2. Create a new snippet.

  3. Add a conditional block similar to the example above.

  4. Set it to run only on the front end.

  5. Save and test the page.

This allows you to inject the WeTravel widget into any trip layout without touching the theme files.


Preview and Test Your Page

After adding the code:

  • Test in Preview Mode

  • Check on desktop and mobile.

  • Click Book Now to ensure the checkout overlay opens.

  • Make sure no caching plugin is blocking the embed.

Learn more about how to install a WordPress plugin here.

Need help with widget integration? Reach out to us, and our in-house team will assist you with the next steps!

Did this answer your question?