avenue-logo
Setup

WordPress

Add Avenue embed to your WordPress site

Add Avenue to WordPress

This guide shows how to add the Avenue booking form to your WordPress website.

Prerequisites

Before you begin, make sure you have:

  • Access to your WordPress admin dashboard
  • Permission to install plugins or edit existing plugin settings
  • Your Avenue embed code (sent to you via email)

How It Works

The Avenue embed code is a script that needs to be added to your website's header. Once added, the booking form will appear as a floating button on your site.

There are two recommended methods depending on your setup.


Method 1: Simple Custom CSS and JS Plugin

This is the simplest method for most WordPress sites.

Step 1: Install the Plugin

  1. Log in to your WordPress admin dashboard and go to Plugins
  2. Click Add New Plugin
  3. In the search box, type "Simple Custom CSS and JS"
  4. Find the plugin and click Install Now
  5. Once installed, click Activate

Step 2: Add the Embed Code

  1. In the WordPress admin menu, go to Custom CSS & JS > All Custom Code
  2. Click Add HTML Code
  3. Delete any default template code in the editor
  4. Paste your Avenue embed code
  5. Change the title at the top to "Avenue Form"
  6. Click Publish

Step 3: Verify

  1. Click Visit Site or go to your website
  2. Refresh the page
  3. You should see the Avenue booking button appear

Method 2: Elementor Custom Code

If your site uses Elementor Pro, you can use its built-in custom code feature instead of installing an additional plugin.

Step 1: Access Custom Code

  1. In the WordPress admin menu, go to Elementor > Custom Code
  2. Click Add New

Step 2: Add the Embed Code

  1. Give it a title (e.g., "Avenue Form")
  2. Set the location to Head
  3. Paste your Avenue embed code in the code editor
  4. Under display conditions, select Entire Site
  5. Click Publish

Step 3: Verify

  1. Visit your website
  2. Refresh the page
  3. You should see the Avenue booking button appear