Hi, I appreciate this is fairly niche but after a couple of days attempting to shoehorn the recommended solution into my inherited codebase, I’m running out of steam and could use some help.
My page / component structure looks a bit like this:
demo.js
{companySize === 0 && (
<>
<section>
loadedCallback={() => {
let formID = "1001";
MktoForms2.loadForm( "//go.our-domain.com", "NUMBER", formID,
function (form) {
form.onSuccess(function () {
let formValues = form.vals();
if (formValues) {
setDemoDataSubmitted({
country: formValues.Country,
companySize: formValues.companySize,
companyName: formValues.Company,
firstName: formValues.FirstName,
lastName: formValues.LastName,
email: formValues.Email,
phone: formValues.Phone,
});
}
if (formValues.companySize) {
setCompanySize(
parseInt(formValues.companySize)
);
} else if (
formValues.cBcompanymetricsemployees
) {
setCompanySize(
parseInt(
form.vals().cBcompanymetricsemployees
)
);
}
setAnimateNavBarBackground(true);
window.scrollTo(0, 0);
return false;
});
}
);
MktoForms2.whenReady(function (form) {
Calendly.initMarketoForm({
id: "1001",
url: "https://calendly.com/api/form_builder/forms/ROUTING-URL/submissions",
options: {
hide_gdpr_banner: 1,
text_color: "19092f",
primary_color: "3B166A",
},
});
});
}}
</section>
</>
)}
{companySize === 1 && <ThankYouForm />}
{companySize >= 2 && ( <ThankYouForm showCalendly /> )}
ThankYouForm.jsx
return (
{showCalendly ? (
<>
<div className="relative z-0">
{/* Calendly Inline Widget */}
<InlineWidget
url="https://calendly.com/our-company-activation/our-company-demo-request?text_color=19092f&primary_color=3B166A"
pageSettings={{
hideEventTypeDetails: false,
text_color: "#19092f",
primary_color: "#3B166A",
}}
styles={{ height: "700px" }}
/>
</div>
</>
) : (
<>
Some other content
</>
)}
The current pageflow puts the Calendly inline widget in the ThankYouForm component, but our Growth team wish to use Routing to choose which team to push the enquiry toward, based upon companySize.
Currently - the inline widget loads in the ThankYouForm, just as we’d like it to - but it only shows the calendar specified in its URL. The Routing logic loads as a modal on top of the website, instead of taking the place of the inline widget.
I have three questions.
1. Is it possible to redirect the inline widget using the Routing logic?
2. How might I do that?
3. If it’s not possible, is there another way to use Calendly’s Routing logic using an inline option?
Thanks so much for reading this, and if there’s any clarification you’d like, please don’t hesitate to ask.