How do I retrieve the current response after user fills in the form?

Hi @mathio ,

I looked at your example and it looks like you are retrieving the response answers using the response_id and form id. However, is not entirely clear to me how you were able to retrieve the `response_id`, in the code it seems to be passed to the function specified in onSubmit(), is that correct?

const handleTypeformSubmit = async ({ responseId }) => {
  const response = await fetch(`/api/response?formId=${formId}&responseId=${responseId}`)
  if (response.ok) {
    const { name, rating } = await response.json()
    console.log(‘Form responses’, { name, rating })
    // TODO: save name and rating in cookie 
    //       and use it to personalize the tooltip
 }
}

id={formId}
    chat
    tooltip={getTooltip()}
    key={`${typeformName}-${typeformRating}`}
    onSubmit={handleTypeformSubmit}
    hidden={{
      visitor_name: typeformName,
      visitor_rating: typeformRating === null ? ‘’ : (isTypeformRatingGood ? ‘good’ : ‘bad’),

@Jver you are correct, the responseId is passed to onSubmit callback. It identifies the response that was just submitted.

Thanks, I think I got it. Very helpful article when you read the github embed docs first

I am running into one problem, when I have two typeforms to embed it stops working, as they both require the same parameters which run into a conflict:

const { open, close, toggle, refresh } = window.tf.createPopup('id')

renaming the parameters like so breaks the functionality:

const { open_2, close_2, toggle_2, refresh_2 } = window.tf.createPopup('id')

document.querySelector('.my_class').onclick = toggle_2

Is there a fix for this issue?

In JavasScript you simplify it and do it like this:

const popup1 = window.tf.createPopup('id1')
document.querySelector('.my_class_1').onclick = popup1.toggle()

const popup2 = window.tf.createPopup('id2')
document.querySelector('.my_class_2').onclick = popup2.toggle()

It is not necessary to decompose the assignment into multiple variables. However if you really want to:

const { toggle } = window.tf.createPopup('id1')
document.querySelector('.my_class_1').onclick = toggle()

const{ toggle: secondToggle } = window.tf.createPopup('id2')
document.querySelector('.my_class_2').onclick = secondToggle()

I have everything set up correctly, but I have one more question. I want to track utm parameters and have set them up similarly to the hidden variables, like in the code below. However, I am not receiving utm parameters in the submissions of the forms. Is there another way I should go about passing the utm parameters?

const create_and_start_popup = (
    nref,
    oref,
    source,
    medium,
    campaign,
    content,
    term
) => {

    const create_popup = window.tf.createPopup('<form_id>', {
        hidden: {
            'oref': oref,
            'nref': nref
        },
        tracking: {
            'source': source,
            'medium': medium,
            'campaign': campaign,
            'content': content,
            'term': term
        },
        onSubmit: async (data) => {

            url = 'https://www.huurprijshulp.nl/bedankt/?form=nl&response_id=' + data.responseId

            window.location.replace(url)

        }
    })

    // start popup
    create_popup.toggle()

}

Did you setup hidden fields in your typeform with utm_ prefix? If yes, then you need to name them accordingly in the tracking object (eg. not source but utm_source)..