One of the greatest powers of integrating WPHubSite with HubSpot is that you can embed meeting anywhere on your site. This ensures that your content can keep a steady flow of leads flowing and booking on personal or team calendars.
This help article will help you create a new meeting in HubSpot and embed it into the WPHubSite Site Builder. It’s possible to embed HubSpot meetings from any HubSpot plan but there are some limitations depending on your HubSpot plan. There are no limitations from the WPHubSite side, though.
The free HubSpot Sales Hub provides you with only one personal meeting calendar per user. HubSpot Sales Hub Starter gives you a lot more freedom for connecting team calendars and creating more personal calendars, 1,000 personal & team meeting links! Same with Sales Professional and Enterprise.
So, while it’s recommended you use either the Sales Starter Hub or above for more freedom with meeting links, the free Sales Hub also works just fine for you. We used the Professional Sales Hub for this walkthrough.
Without further ado, lets get into setting up your HubSpot Meeting and then embedding it into WordPress with the WPHubSite Site Builder.
Create A HubSpot Meeting
Before you have something to embed in your WordPress website, you must first create a meeting in HubSpot. Here’s how to do that.
Step 1: Click on the Sales drop-down.
Step 2: Click the Meetings option.
Step 3: Click the Create meeting link button. The button says meeting link (you can send a link to the meeting scheduler also) but you also get an embed code for each meeting.
Step 4: Choose which type of meeting you’d like to create.
Note: If you’re on the free version of HubSpot Sales Hub then you can only create a personal meeting. All other Sales Hub plans you can also create a team meeting. If you create a team meeting then you can choose between two types of team meetings.
- Group Availability: Everyone on your team has to be available for a client to schedule the meeting.
- Round Robin Availability: The client gets to choose the time that’s best for them with a single member of your team.
We’re setting up a personal meeting here.
Step 5: Click on the picture to either choose an image you already uploaded to HubSpot or you can upload a new image.
Step 6: Name the meeting whatever you want. Whatever you put here will show up at the top of the calendar when your meeting embed is viewed.
Step 7: When you send an email in HubSpot and link to your meeting link, this name will be used for the link. It’s completely irrelevant when you embed your meeting into Site Builder, though.
Step 8: Name the slug or folder whatever you want for the link URL of your meeting. Again, this isn’t relevant for embedding a HubSpot meeting and nobody will ever see it.
Step 9: Choose what session durations are available (up to 3) so users can choose how long your meeting is.
Step 10: Click the Next button.
Step 11: You can type a conference line, video link, etc. in this box for the location. It can be whatever you want and you can update in the event that’s scheduled on your calendar later too. Pre-populating this field only works well if you have a dedicated video URL, conference line, or if your client is supposed to call you.
Step 12: The calendar event will have whatever you put here for the title of it. You can also put in tokens such as the client or company name. This should be helpful so your client or prospect knows what the meeting is going to be about (they forget sometimes).
Step 13: Add a helpful description that further describes what the event is for and what to expect. It may even be helpful to put an overview of the call to help your customer or prospect remember and know more.
Step 14: Choose the language for the meeting page (anything you don’t input).
Step 15: Choose the country you’d like date and numbers formatted for.
Step 16: If you want your customer or prospect to receive an immediate email with information about the meeting, turn this on.
Step 17: People forget, it’s a good idea to turn this on with at least one reminder email. You can add up to three different alerts for the day and times leading up to your meeting. It will automate this so the meeting is less likely to be missed.
Step 18: Click the Next button.
Step 19: Select your time zone you’re in. HubSpot will use this time zone to adjust available times when scheduling a meeting.
Step 20: Choose the days and times you’re available to schedule. You can add any kind of day/time schedules you’d like including breaks for lunch, etc. Times won’t be available within your schedule if the calendar of you or your team is unavailable, though.
Step 21: This button lets you add more days/times to your available meetings.
Step 22: Last minute meetings aren’t nice. This option is nice because then you can choose how close to the current day/time people can schedule a meeting.
Step 23: If you need prep time or travel time then this option is helpful to separate meetings with a buffer.
Step 24: The further in advance a meeting is scheduled the more likely it will be forgotten. Choose wisely.
Step 25: Choose what time increments people can select meetings for. If you choose hourly then meeting start times will only show up on the top of each hour and if something is blocking the start time, there won’t be a meeting available during that hour slot.
Step 26: Click the Next button.
Step 27: You can add more fields for customers or prospects to fill out in order to schedule a meeting. You can add contact properties or even custom questions. If you’re on the free Sales Hub then these are disabled.
Step 28: Choose if you’d like the meeting submitted and scheduled when all fields are filled or if you’d like your customer or prospect to click a button.
Step 29: Choose whether you want the form to be GDPR compliant or if you don’t care.
Step 30: Click the Save changes button when you’re done with everything.
Step 31: Click the Embed on your website tab. You can also send the direct link to your event which is good for emails and such.
Step 32: Click the Copy code button.
Step 33: Click the Close button when you’re all finished and ready to go to embed the meeting in to your WPHubSite WordPress website.
Get A HubSpot Meeting Embed Code
Whether you already created a meeting that you’d now like to embed into your website or you just need access to a meeting embed code you already created, this will help you get it. Embed codes for any meeting are only available for HubSpot Starter Hubs and above. You’ll see a lock if you’re on free HubSpot.
You can head into HubSpot and get the embed code for any meeting you own so you can embed it into any WPHubSite Site Builder page. It’s a great way to embed HubSpot meetings into WordPress whether you created it or not.
Ready to get started and grab the meeting embed code?
Step 1: From in HubSpot, click the Sales drop-down.
Step 2: Click Meetings.
Step 3: Hover over the meeting you’d like to get the embed code for.
Step 4: Click the Actions button.
Step 5: Click the Embed option.
Note: You’ll see a lock on this option if you’re on the HubSpot free plan. You need to upgrade to HubSpot Sales Hub Starter to embed meeting into your WPHubSite website.
Step 6: Click the Copy code button.
Step 7: Click the Close button.
That’s it! Now you’re equipped with the embed code that you can use in the following section. This is how you’ll embed the HubSpot meeting into your WordPress website using the WPHubSite Site Builder.
Embed A HubSpot Meeting In Site Builder
Now it’s time to embed your HubSpot Meeting into your WordPress website. You can put a HubSpot meeting on any page, blog post, or anywhere you can embed HTML (which is pretty much anywhere with WPHubSite!)
You can put your schedule meeting embeds in any flow of your website. My personal favorite is having a lead form that then forwards to a page with the meeting embedded. This way you can capture a new lead and give them an immediate option to schedule time for a demo, consultation, or whatever!
You need one of the HubSpot paid hubs to be able to embed a meeting. If you have the free plan then you can only link to your meeting page.
Ready to get started embedding your HubSpot Meeting into WordPress using WPHubSite Site Builder?
Let’s do it!
Step 1: Log into your WPHubSite website if you’re not already in there.
Step 2: Click or hover over over Pages in the WordPress admin dashboard.
Step 3: Click on All Pages.
Step 4: Hover over a Site Builder page that you’d like to edit.
Step 5: Click the Site Builder link.
Step 6: Click the + button to add a new item to your layout. If you’d like to add the meeting to a column then you will need to create that before the next step.
Step 7: Drag an HTML module into your layout where you’d like it.
Step 8: Paste the HubSpot Meeting embed code into the HTML box of the HTML module.
Step 9: Click the Save button.
Step 10: Click the Done button and then the Publish button that pops out.
We’ve now created the following HubSpot Meeting embedded into a WordPress website. The meeting scheduler will look different depending on how much space it has.
With a wide column the form will show a calendar with available times also. With a narrower column then it will only show a calendar with the times available showing up only after a date is chosen.
Once a visitor goes through the full meeting schedule process they will see a confirmation message. Everything happens directly within your website and visitors will never know they are actually booking within HubSpot.
