This guide will guide you through integrating the HubSpot Forms you have on your website with Demodesk booking and routing pages. The integration allows you to:
Redirect leads directly to the right Demodesk booking page based on their input in the HubSpot Form - without entering it again.
Transfer data from the HubSpot form directly to Demodesk's routing system. This advanced feature empowers you to apply routing rules that assign leads to the appropriate host based on the information submitted. Improved matching will mean a better customer experience and, therefore, an improved conversion.
Implementing this integrated approach optimizes your lead management process and provides a smooth customer experience.
How to setup HubSpot Forms with Demodesk booking or routing pages?
Set up your HubSpot Forms
Go to the meeting type or routing in Demodesk that you want to redirect to.
Click Add to your website and add
Booking Page
Routing Page
Paste your HubSpot Forms id in the field. See here guidance on where to find it.
Click "Create Snippet"
Copy the code snippet and add it your website. More guidance here.
Disable Redirect on the HubSpot Form. Learn more here.
How to map fields from HubSpot to Demodesk tokens?
Go into the Tokens settings
Ensure field in the HubSpot Forms should map to a Demodesk field with an active HubSpot Connection and "Read" access.
How to get the HubSpot Forms ID
If your landing page contains several forms and you only want Demodesk to activate for specific ones, you need to identify these forms by their HubSpot FormIDs.
To find the FormIDs in HubSpot, go to Marketing > Lead Capture > Forms. Select your form and locate the FormID in the URL displayed in your browser.
https://app.hubspot.com/submissions/<CompanyID>/form/<Your_HubSpot_Forms_ID
Alternatively, click the "Share" button on the top-right, and the FormID will appear in the pop-up window.
How to insert the code snippet to your page
Custom Website
Let your web developer know to insert that code snippet on your website - either below the form on the page or in the footer.
HubSpot website/ landing page
Whether you're using HubSpot's legacy or beta version for your website/landing page, the location to add this code remains consistent. Go to Settings, then Advanced (options), and finally, place the code in Footer HTML.
Disable redirect on the HubSpot Form
To ensure that Demodesk loads when the form is submitted, you will want to disable any complete page redirects in HubSpot. Demodesk can add a redirect after booking within the Inbound Router settings.
You may need to disable the redirect on both the form and the landing page separately. Disabling it in one place may not disable it in both.
Landing Page
Select the form on the homepage to modify its content.
Form Editor
Change the redirection setting by accessing the "options" menu in the form editor.
Depreciated: Technical implementation
Before the integration of native HubSpot Forms, the same functionality could be achieved with the help of a web developer.
❗Important: To seamlessly implement this integration, you will require assistance from your website developer! This article can guide them through the process
To assist your developers, please provide them with the list of token slugs that you want pre-filled with data from the HubSpot form. Ideally, you have already sent them a "functioning" link as follows: https://demodesk.com/select/your-company/xyz?deal_size=X&custom_token_company_name=AcmeCorp`
Note the functionality of prefilling routing questions via URL parameters is described in the following help center article.
Technical documentation: How to prefill a Demodesk routing page with the values from a HubSpot form submission
⚠️ This section is designed for readers with expertise in web development.
This task consists of the following topics:
Delay the adding of the Demodesk iframe until the HubSpot form is submitted
Extract the values that the visitor entered from the HubSpot form
Prefill the questions in the Demodesk routing form with the values from the HubSpot form
(Optionally: Hide the questions in the Demodesk routing form)
The questions inside a Demodesk booking or routing page can be prefilled via URL parameters. This functionality is described in the following help center article.
TL;DR: Each question has a "token slug" (a Token is set up inside Demodesk and defines how data is synced with your CRM). One can then prefill form fields like your_token_slug=the_value`.
HubSpot forms emit an event when they get submitted, hence, you can listen to that event, extract the form values, and then add the Demodesk iframe with the pre-filled form fields.
The subsequent code snippet serves as an illustrative implementation.
Replace the current Demodesk code snippet with this snippet modified to your specific requirements.
window.addEventListener('message', function (event) {
const formId = $('.demodesk-hubspot-form').attr('data-form-id');
if (
event.data.type === 'hsFormCallback' &&
event.data.eventName === 'onFormSubmitted' &&
event.data.id === formId
) {
// get hubspot form submission data
const query_params = event.data.data.submissionValues
const language = $('.demodesk-hubspot-form').attr('data-language');
delete query_params.hs_context;
// adjust the name of some fields to match the demodesk token slugs
query_params['customer_email'] = event.data.data.submissionValues.email;
query_params['customer_first_name'] = event.data.data.submissionValues.firstname;
query_params['customer_last_name'] = event.data.data.submissionValues.lastname;
query_params['customer_company_name'] = event.data.data.submissionValues.company;
query_params['lang'] = language;
let demodeskQueryParams = [];
for (let d in query_params){
ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(query_params[d]));
}
// add your demodesk path here (eg. '/book/max-muth/talk')
const demodeskPath = '';
var r="https://demodesk.com";
var t=/([.*+?\^${}()|\[\]\/\\])/;
function n(e){return e.replace(t,"\\$1")}
function e(e){var t=document.cookie.match(RegExp("(?:^|;\\s*)"+n(e)+"=([^;]*)"));return t&&t[1]}
function a(e){var t=r+demodeskPath+"?iframe=true&" + demodeskQueryParams.join('&');return e?t+"&hutk="+e:t}
var i=document.createElement("iframe");
i.style="width: 100%; min-height: 230px; border: none;";
i.classList.add("demodesk-demo-template-routings-page");
i.src=a(e("hubspotutk"));
var m=document.createElement("script");
m.src=r+"/iframe_resize.js";
var c=document.getElementById("demodesk-iframe-hubspot");
var o=c.parentElement;
o.replaceChild(i,c);
o.insertBefore(m,i.nextSibling);
}
})As you see, this would add the Demodesk iframe in #demodesk-iframe-hubspot` and prefill it with all the values from within the HubSpot form.
⚡ Pro tip: If you request identical information in both the HubSpot form and the Demodesk routing form, your Demodesk admin can assign the question, on Demodesk, as hidden in the routing form to prevent users from answering the same question twice (more details)