Passing Calendly Variables to an Embedded Typeform

Hello everyone,

About Me:
I'm new to coding, so please bear with me.

Issue:
I have managed to pass Calendly variables to an embedded Typeform via HTML using the parameter 'transitiveSearchParams'. However, I'm having trouble implementing this solution in Javascript. The reason I need to use Javascript is because I have custom fields in Calendly that pass URL data with parameters like answer_1, answer_2, etc.

Typeform does not accept answer_ as a hidden field, so I cannot use the default Calendly variables with 'transitiveSearchParams'.

Attempted Solution:

Part 0-a:
This is the URL that Calendly passes to the embedded Typeform. I’ve removed some of the extra variables that Calendly passes by default:

https://mysite.com/embed-typeform?invitee_first_name=Bob&invitee_last_name=Jones&invitee_email=bob.jones@gmail.com&answer_1=Red&answer_2=Blue&answer_3=Yellow

Part 0-b:
The expected result I want to see in my Typeform is:

• invitee_first_name: Bob
• invitee_last_name: Jones
• invitee_email: bob.jones@gmail.com
• ans1: Red
• ans2: Blue
• ans3: Yellow

Note: The variables should be ans1, ans2, etc., not answer_1, answer_2, etc.

Part 1:
My approach:

1. Pass information via Calendly.
2. Assign a new variable (ans1) to answer_1.
3. Load ans1 into the hidden field.

Part 2:
I've created a new Typeform with hidden variables: ans1, ans2, ans3, invitee_first_name, invitee_last_name, and invitee_email.

Part 3:
Here's my code snippet that fetches values from the current URL:

javascript

var url_string = window.location.href;

var url = new URL(url_string);

var ans1 = url.searchParams.get("answer_1");

var ans2 = url.searchParams.get("answer_2");

var ans3 = url.searchParams.get("answer_3");

Part 4:
I need to combine the above snippet with the following one, and this is where I'm facing issues:

<script>
import { createWidget } from '@typeform/embed';
import '@typeform/embed/build/css/widget.css';

var url_string = window.location.href;
var url = new URL(url_string);
var ans1 = url.searchParams.get("answer_1");
var ans2 = url.searchParams.get("answer_2");
var ans3 = url.searchParams.get("answer_3");

window.tf.createWidget('u67kOcjW', {
  container: document.getElementById('wrapper'),
  transitiveSearchParams: ['invitee_first_name', 'invitee_last_name', 'invitee_email'],
  hidden: {
    ans1: ans1,
    ans2: ans2,
    ans3: ans3,
  },
});
</script>

<div 
     id="wrapper" 
     data-tf-widget="u67kOcjW" 
     data-tf-inline-on-mobile 
     data-tf-medium="snippet">
</div>

Part 5:
Can someone help me finalize this? I'm looking for the complete code to paste into my site and test. Please remember I'm a beginner, so any explanations should be beginner-friendly. Thank you for your assistance.