typeform / embed Goto Github PK

I'm creating the form with .makePopup(url, options) and in the options passing 2 callback functions.

1. onSubmit - this one is working fine
2. onClose - this one is not working for me. I expect that it should fire when the "X" is clicked to close the popup form, but when clicking the "X" the form does indeed close, but the onClose function is not triggered.

Hello,

I try to use hidden field but when I look in Postman I see the hidden fields empty?

My code:
createPopup(formID, { size: 90, open: "load", hidden: { customerID: user, productArea: RMProductArea, }, onSubmit: (data) => { checkResponse(data.responseId); }, });

both user as RMProductArea are variables with strings as values

if I check in postman for the same responseId in the hidden field part, I see:

"hidden": {},

Is this an issue? of am I doing something wrong?

Describe the bug
Trying to use library in next.js and getting window is undefined when using makeWidget within useEffect which is client side rendered only

To Reproduce
See basic example in repo:
https://github.com/conorshaw/typeform-next

Expected behavior
Shouldn't error out with window undefined when client side rendered

Current behavior
Throws window is undefined error

I couldn't load typeform embed script on website that use RequireJS.

Reproduce
I added <script src="https://embed.typeform.com/embed.js"></script> via Google Tag Manager, but I still get Uncaught ReferenceError: typeformEmbed is not defined. The problem was with requireJS version 2.3.6 and line that imports typeform script

"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.typeformEmbed = t() : e.typeformEmbed = t()

RequireJS doesn't allow an empty array in define([], t)

Dirty fix
You can add typeform embed via GTM as below

<script>
  var tmpDefine = define;
  define = undefined;
  var el = document.createElement('script');
  el.src = 'https://embed.typeform.com/embed.js';
  el.onload = function() { define = tmpDefine };
  document.getElementsByTagName('head')[0].appendChild(el);
</script>

Hello, it's me

On iOS platform the cordova application don't start and in console output I see next error:

Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)

Reproduced on iOS app start.

Hello, I have been noticing that most releases seem to require a deliberate npm upgrade. For example going from 0.30.0 to 0.31.0. Reading the change logs, it seems like breaking changes aren't very common. Would it make sense to use the last digit of the version number more often, so that an npm update will upgrade automatically, and reserve the middle digit release for things that require a more conscientious update?

Describe the bug

The v1.0 version of this package gives an undefined error on createWidget(element, ....) if passed a ref.current value in React.

This worked fine in version 0.34.6. Also, makeWidget is now createWidget apparently, so I think the docs are lagging behind.

To Reproduce
Steps to reproduce the behavior:

1. Install @typeform/embed (latest)
2. Add the following code:

import React, { useRef, useEffect } from 'react'
import * as typeformEmbed from '@typeform/embed'

const MyTypeform = () => {
  const typeformRef = useRef(null)

  useEffect(() => {
    typeformEmbed.makeWidget(typeformRef.current, 'https://form.typeform.com/to/MY_TYPEFORM_ID', {
      hideFooter: true,
      hideHeaders: true,
      opacity: 50,
    })
  }, [typeformRef])

  return <div ref={typeformRef} style={{ height: '100vh', width: '100%' }}></div>
}

Expected behavior
I expect the form embed to load as usual.

Current behavior
The ref.current value seems to be handled incorrectly when the createWidget method is called.

Problem 1: makeWidget does not exist anymore, please update the docs.

Problem 2: 'Cannot set property 'innerHTML' of undefined

Describe the bug
After updating @typeform/embed in a Gatsby project from v0.33.2 to v0.34.5 and either running develop or production mode the following error is thrown:

  WebpackError: ReferenceError: regeneratorRuntime is not defined
  
  - lib.pure.js:1 
    node_modules/@typeform/embed/build/lib.pure.js:1:41435

To Reproduce
Steps to reproduce the behavior:

Install @typeform/embed @ v0.34.5in a Gatsby project, add it as described & run yarn build (or yarn develop then it's shown in the Browser).
(But probably with many a React App).

Expected behavior
Typeform doesn't throw an error ; ).

Desktop (please complete the following information):

  System:
    OS: Linux 5.4 Linux Mint 20.1 (Ulyssa)
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 7.5.2 - ~/.nvm/versions/node/v14.15.3/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 85.0
  npmPackages:
    gatsby: ^2.32.3 => 2.32.3

Additional context
I know you state in the README that no polyfills are included, but you might perhaps add that
@babel/plugin-transform-runtime is needed. But as it quite increases the bundle size, I refrain from it and stay @ v0.33.2.

Never mind 👍

Hello,

I'm having some issue while trying to embed the new version of the @typeform/embed package.
Following the instruction, I got the latest package version and my code is as follow on angular 11:

import { Component, OnInit } from '@angular/core';
import { createPopup, createWidget } from '@typeform/embed';
import '@typeform/embed/build/css/widget.css';

@Component({
  selector: 'app-application-view',
  templateUrl: './application-view.component.html',
  styleUrls: ['./application-view.component.scss'],
})
export class ApplicationViewComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    createWidget('form-id', { container: document.querySelector('#form') });
  }

  openTypeform() {
    createPopup('form-id', { size: 90 });
  }

}

The createPopup function doesn't do anything, no errors but nothing happens either.

The createWidget function brings the following error while being displayed:

Any thoughts and fixes for those two issues? I am particularly looking for the createPopup fix :).

thanks!

Hello, my name is Max Prilutskiy, I'm testing the Github <> JIRA integration.

Who could help me out? I am trying to render my form on my site.

This library comes at a whopping 113.1kB minified https://bundlephobia.com/result?p=@typeform/[email protected]

That is not very good for just showing a form on a website.

Is your feature request related to a problem? Please describe.
Because there is the callback onScreenChanged I would like to use this to customize tracking. Currently, Typeform only supports tracking with Google Analytics. But not we are running Google Adwords ads. You can track conversions for Google Adwords using Google Analytics, but there are some differences between Google Adwords conversion tracking and Google Analytics Conversion tracking. Those are explained here: https://www.optimizesmart.com/difference-between-google-adwords-and-google-analytics-conversion-tracking

Describe the solution you'd like
Ideal for me would be if the onScreenChanged callback would have a parameter, that enables me to identify which page is currently shown to the user. I could then pass the name of the page (question) to the tracking API.

Describe alternatives you've considered
Google Analytics

Hey, don't worry, I'm testing the Slack integration.

We are using useRef to embed the component in react underneath I saw 2 nested divs and an iframe, I tried a few different techniques to add event listeners to the current.children but nothing works, can we expose a callback. to createWidget?

[BUG] onReady callback function is not called when the Typeform loads

Describe the bug
We use the typeform embed on a Vue.js web app. We started getting an error and decided to update from 0.9.0. Now when building our project we get an error saying we're messing react and react-dom dependencies.

To Reproduce
Vue.js project.
Install package and build project

• OS: MacOS
• Browser: build stage bug
• Embed SDK Version: 0.31.1
• NodeJS version: 10.22.0
• NPM version: 6.14.6

Hey folks,

How can I get the responses/answers after submitting a form? (onSubmit)

I need to get the response from one form, to create a new widget with a new form.
F.e.:

• 1st Form: Select Gender
• 2nd Form: Show Questions from either male- or female-form

Thanks in advance for your help.

It would be nice if type declarations could be added to the project.

Feature request: Considering that the survey progress logic in the footer doesn't work well (on our survey, it gets to 90%, jumps back to 70%, builds to 90%, back to 70% etc), I would love to simply retrieve the current question number and show progress myself.

For example, if I know my survey has 40 questions, I can simply take the percentage complete.

I see survey progress is being stored in localstorage now, under typeform domain (which I have no access to from my javascript).

For example, if a user abandons the embedded survey then logs out of my app. I can see no way of clearing typeform's local storage. So the next user will see the previous user's progress.

Hi, good afternoon. Would be possible to add a new callback onFinish or similar? It would be useful when opening surveys in custom modals. The idea is to be allowed to do something when button in ending page (after submitting the survey) has been clicked.

In my case I want to close my custom modal when user click the last button in the survey.

createWidget(this.surveyIdValue, {
    container: this.bodyTarget,
    enableSandbox: this.debugValue,
    hidden: {
        name: this.nameValue,
        email: this.emailValue,
        source: this.sourceValue,
    },
    onSubmit: () => {
        // do something when survey has been submitted
    },
    onFinish: () => {
        // do something when ending page button has been clicked
        this.hideMyCustoModal()
    },
});

How can we use the sdk with angular?
When following the guide I end with the following errors:

Error: ./node_modules/@typeform/embed/build/lib.pure.js
Module not found: Error: Can't resolve 'react' in '/Users/freer/Desktop/Slush/node2.0/node-by-slush/node_modules/@typeform/embed/build'

Error: ./node_modules/@typeform/embed/build/lib.pure.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/freer/Desktop/Slush/node2.0/node-by-slush/node_modules/@typeform/embed/build'

Is there a fix on embedding typeform popup on an angular project?
Happy to hear suggestions :)

To Reproduce
On angular 11
npm install --save @typeform/embed

in my typescript file:

`openInvestorTypeForm() {
const reference = typeformEmbed.makePopup(
'https://developerplatform.typeform.com/to/Xc7NMh',
{
mode: 'popup',
autoClose: 3000,
hideHeaders: true,
hideFooters: true,
onSubmit: function () {
console.log('Typeform successfully submitted');
},
}
);

reference.open();

setTimeout(function () {
  reference.close();
}, 10000); 

}`

Expected behavior
I should get the embedded typform as a popup like specified in the sdk guide.

Please let me know if you successfully managed to embed a typeform on angular using the sdk, or anything else for that matter!

Thanks a lot in advance!

In Mobile view, closing a typeform after submitting takes us back to the first page in new version.
I want to open a typeform as a widget in my page. But in mobile view, the typeform widget shows the welcome screen which is not required for me. Now on clicking the start, the typeform opens in a new fullscreen popup. This was not the behaviour earlier. Now what happens is that on submitting the typeform, the popup remains open. If I close it, it presents me back to the first question of typeform, this time not in a popup.

Expected behavior
Post submission, the typeform in the widget should also show submission screen. And the popup should close by itself.
Current behavior
Post submission, we are presented with the submission screen in the popup. On closing the popup, we are redirected to the first page of typeform in widget mode.

Screenshots (Please find images below in the order of flow)

Bold
Italic

Link to google.com

Is your feature request related to a problem? Please describe.
On the site that I work on Typeform is embedded as a widget. And the users are confused by two scrollbars: One for the parent site and one for the Typeform.

Describe the solution you'd like
That the iframe automatically resizes according to the content.

Describe alternatives you've considered
I tried https://github.com/davidjbradshaw/iframe-resizer but it did not work.

Additional context
The idea would probably be to leverage postMessage

Want to contribute?
Maybe

Dear all
I have my Widget using Embed React as bellow, and the onQuestionChanged fired twice on the first question
Do you have any idea about this?

<Widget
    id={ENQUIRY_FORM_ID}
    onReady={() => {
      console.log('form ready');
    }}
    onQuestionChanged={(data) => {
      console.log('question changed to ref:', data.ref);
      const matchedEvent = eventData.find((item) => item.id === data.ref);
      if (matchedEvent) {
        gtag.track(matchedEvent.name, matchedEvent);
      }
    }}
    onSubmit={(data) => {
      console.log('forms submitted with id:', data.responseId);
      const formSubmitPayload = {
        eventName: 'TypeformSubmit',
        elementId: data.responseId,
      };
      gtag.track('typeform_submit', formSubmitPayload);
    }}
    style={{ position: 'inherit', height: '100vh' }}
  />

Thank you very much

Describe the bug
I've create a react hook that return the open/close functions to any component that needs to utilize it. Whenever the typeform popup window opens the refused to frame error occurs:
[Report Only] Refused to frame 'https://<domain>.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:".

The typeform still functions as usual, even with this error popping up. I'm able to fully complete and submit it.

To Reproduce
Steps to reproduce the behavior:
This is the hook:

import { useState, useEffect } from 'react';
import ROUTES from 'lib/constants/routes';

export default function useTypeform(): {
  closeTypeform: () => void;
  openTypeform: () => void;
} {
  const [typeform, setTypeform] = useState(null);

  useEffect(() => {
    (async () => {
      const { makePopup } = await import('@typeform/embed');

      const reference = makePopup(ROUTES.requestAccess, {
        mode: 'popup',
        autoClose: 1000,
        hideHeaders: true,
        hideFooters: true,
      });

      setTypeform(reference);
    })();
  }, []);

  const closeTypeform = () => {
    if (typeof window !== 'undefined' && typeform !== null) {
      typeform.close();
    }
  };

  const openTypeform = () => {
    if (typeof window !== 'undefined' && typeform !== null) {
      typeform.open();
    }
  };

  return { closeTypeform, openTypeform };
}

Expected behavior
No errors on opening typeform popup.

Current behavior
[Report Only] Refused to frame 'https://<domain>.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:" - Error appears

Desktop:

• Browser - Chrome[Version 88.0.4324.96] - Nextjs Local development
• Browser - Safari[Version 14.0.2 ] - Nextjs Live Deployment

Describe the bug
The new "conversations" type of forms doesn't trigger OnSubmit function.

To Reproduce

// with /c/ url
typeformEmbed.makeWidget(
    element,
    'example.typeform.com/c/xxxx',
    {
        onSubmit: () => {
          console.log('does not work');
        }
    }
);

// with /to/ url
typeformEmbed.makeWidget(
    element,
    'example.typeform.com/to/xxxx',
    {
        onSubmit: () => {
          console.log('works');
        }
    }
);

Expected behavior
onSubmit should be executed at the end of the conversation form or a new onFinished trigger should be implemented

Current behavior
onSubmit is not executed at the end of conversational forms.

Desktop (please complete the following information):

• OS: MacOs
• Browser: Chrome
• Embed SDK Version: pulled from https://embed.typeform.com/embed.js

As the title states, none of this three arguments are currently working.
The source code shows thats its simple missing to assign the option to the iframe dom object:

I have embedded a form in typeform in my webpage in development but it's giving me the following error:

How to fix this?

HI, I'm seeing some unexpected behaviour while working with transferableUrlParameters (data-transaferable-url-parameters) when the querystring param is not present.

The master code that handles search params has this code below:

  transferableUrlParameters.forEach((transferableParam) => {
    if (!(transferableParam in queryStrings)) {
      queryStringsWithTransferedParams[transferableParam] = urlSearchParams[transferableParam]
    }
  })

So the method is forcing all params from data-transaferable-url-parameters to be set in queryStringsWithTransferedParams as undefined and later, in method appendParamsToUrl this resultant object will be transformed into a querystring keeping the undefined as "undefined" due to the usage of encodeURIComponent.

const appendParamsToUrl = (url, params) => {
  const queryParameters = []
  const { query, origin, pathname, hash } = UrlParse(url, true) // new URL(url) in browser env
  const path = pathname.replace(/\/$/, '') // remove trailing slash
  const parameters = Object.assign({}, query, params)

  Object.keys(parameters).forEach((key) => {
    queryParameters.push(`${encodeURIComponent(key)}=${encodeURIComponent(parameters[key])}`)
  })

  return `${origin}${path}?${queryParameters.join('&')}${hash}`
};
console.log(appendParamsToUrl('http://localhost/', { contains: 'value', missing: undefined }));
// http://localhost?contains=value&missing=undefined

This can be fixed working in a change for any (or both) methods listed above (transferUrlParametersToQueryStrings and appendParamsToUrl), but, as I said, I'm not sure if you are maintaining this old/classic version 🤔

There's almost no white space below the start button. Looks very squished.

Describe the bug
Following the set up in the readme I'm receiving this error

Unhandled Runtime Error
Error: JSONP request to https://admin.typeform.com/app/embed/g4Hulgf4?jsoncallback=? failed

Call Stack
HTMLScriptElement.jsonpScript.onerror
node_modules/@typeform/embed/lib/api.js (8333:0)

The console also shows this error

admin.typeform.com/app/embed/olz2XlNv?jsoncallback=?&jsoncallback=jsonp_1602775661907_18757:1 Failed to load resource: the server responded with a status of 404 ()
54b82ca6.b03245ebd761ac836a5e.js:1 

To Reproduce
Steps to reproduce the behavior:

1. Go to https://test.thespie.com/digital/the-reunion-livestream-inplayer/2535
2. Open the console to see the errors

Expected behavior
No errors

Current behavior
The JSONP fetch error for https://admin.typeform.com/app/embed/g4Hulgf4?jsoncallback=? and the 404 for admin.typeform.com/app/embed/olz2XlNv?jsoncallback=?&jsoncallback=jsonp_1602775661907_18757

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• latest

Describe the bug
The logo is not showing our logo when using this component but shows when I go to the typeform url directly.

To Reproduce
Use this.

Expected behavior
Should show the logo I guess.

Desktop (please complete the following information):

• OS: Win 10
• Chrome latest
• "@typeform/embed": "^0.25.4",

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.yarnpkg.com/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

I'm getting the following error when building on Netlify:

7:22:56 PM: > Named export 'createWidget' not found. The requested module '@typeform/embed' is a CommonJS module, which may not support all module.exports as named exports.
7:22:56 PM: CommonJS modules can always be imported via the default export, for example using:
7:22:56 PM: import pkg from '@typeform/embed';
7:22:56 PM: const { createWidget } = pkg;

This traces back to:

import { createPopup } from '@typeform/embed';
let showRegistration: boolean = false;
function openRegistrationForm() {
	showRegistration = true;
	// ID omitted from code example
	createPopup('<id>', {
		container: document.querySelector('#register')
	});
}

The code above works fine in the dev environment but isn't accepted by Netlify. I haven't seen it on any other libraries. Unfortunately the solution in the error message doesn't work locally (although it works in Netlify).

It's not a permalink, but you can currently see the code context at this branch: https://github.com/bahaistudies/conference/tree/netlify-identity

Describe the bug
I've been trying to follow the guide to embedding a typeform widget in a React component, but I'm receiving a webpack error. I tried to use makePopup too, but also recieved the error.
I'm using this code

import React, { useEffect, useRef, useState } from "react";
import * as typeformEmbed from "@typeform/embed";

export const Quiz = () => {
  const typeformRef = useRef(null);
  const url =
    "https://form.typeform.com/to/P9O5wcaX?typeform-medium=embed-snippet";
  useEffect(() => {
    typeformEmbed.makeWidget(
      typeformRef.current,
      "https://form.typeform.com/to/MY_TYPEFORM_ID",
      {
        hideFooter: true,
        hideHeaders: true,
        opacity: 50
      }
    );
  }, [typeformRef]);
  console.log(typeformRef);

  return (
    <div ref={typeformRef} style={{ height: "100vh", width: "100%" }}></div>
  );
};

and receiving this error
Uncaught TypeError: _typeform_embed__WEBPACK_IMPORTED_MODULE_1__.makeWidget is not a function

A desription

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
welcome screen appears on desktop as well as mobile

Describe the solution you'd like
A clear and concise description of what you want to happen.
enable/disable on desktop/mobile

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
n/a

Additional context
Add any other context or screenshots about the feature request here.
n/a

Want to contribute?
If you want to contribute you can open a pull request with the proposed changes. Before opening your pull request, please read our contributing guidelines and make sure that no other similar issues are already open

Describe the bug
We have a Typeform that will be used every week. When filling out the form, the answers for that form are populated with last weeks answers.

To Reproduce
Steps to reproduce the behavior:

1. Create a Typeform with the same ID
2. Submit the form successfully
3. Open up the form again

Expected behavior
Answers from the last submission should not be populated

Current behavior
Answers from the last submission are filled out completely on the new form

Desktop (please complete the following information):

• OS: macOS
• Browser: Edge-Chromium / Chrome / Safari
• Embed SDK Version: 0.25.6

Additional context
I am using the makeWidget.

Thanks!

Is __dangerous-disable-submissions supported for embedded forms and, if it is, how can it be enabled it for an embedded form using this library in react?

I'm using the createWidget function in a react app to embed a form as per the react demo and attempting to set __dangerous-disable-submissions to prevent form submission during development and UI testing. I believe I'm correctly setting the param according to the documentation.

I've attempted to pass it via the hidden prop, but that resulted in the param being set as [my other hidden fields]&__dangerous-disable-submissions=. I assume the = at the end will not work.

I tried setting the prop manually by appending it to the iframe src attribute and calling refresh on the widget, but submissions are still being counted against my metrics (although the prop looks correct in the src uri).

Describe the bug
The bug occurs when we try to redirect back to the website from the iframe. Something similar for payments has been explained here. The solution is posted along with it, but there's no way to add params to makeWidget function

To Reproduce

Browser: Safari
User-Agent: iPad-mini/iphone/ipad
version: 13.1.3

Steps to reproduce the behaviour:

1. Go to 'https://demo.enotice.io/place/'
2. Click on 'state Kansas' > select any newspaper > click next > you should see a content prepared step click no
3. Select Name Change
4. Fill out the typeform
5. See Loading Screen Stuck.

Expected behavior
Repeat Same steps on Chrome, it should redirect back to the form without any issue.

Current behavior
is stuck on loading screen on safari browser.

Smartphone :

• Device: iPad/iPad mini/iPhone
• OS: iOS
• Browser: safari
• Version: 13.1.3

Describe the bug
I use angular 9.
After installing typeform/embed and testing typeform I have an error:
Module not found: Error: Can't resolve 'react' in '/app/node_modules/@typeform/embed/build'
ERROR in ./node_modules/@typeform/embed/build/lib.pure.js
Module not found: Error: Can't resolve 'react-dom' in '/app/node_modules/@typeform/embed/build'

Why in my angular project i need to install react libruary?

To Reproduce
Steps to reproduce the behavior:

1. npm install --save @typeform/embed
2. try test typeform
3. See error: Module not found: Error: Can't resolve 'react' in '/app/node_modules/@typeform/embed/build'
   ERROR in ./node_modules/@typeform/embed/build/lib.pure.js
   Module not found: Error: Can't resolve 'react-dom' in '/app/node_modules/@typeform/embed/build'

Expected behavior
A clear and concise description of what you expected to happen.

Current behavior

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Enterprise
• Browser chrome
• typeform/embed "version": "0.31.1"
• NodeJS version - v12.8.0
• NPM version - 6.10.2

Additional context
Add any other context about the problem here.

Describe the bug
Typeform Embed is breaking our site after apparent release https://github.com/Typeform/embed/releases/tag/v0.21.4 - because last good response on our survey was on June 19 2020.

To Reproduce
Steps to reproduce the behavior:

1. Use the latest version of Typeform
2. Use require.js version 2.3.5

Expected behavior
No issues with prior June 20.

Current behavior
Receiving current make error at require.min.js:5:
Uncaught Error: Mismatched anonymous define() module: function(){return r={},o.m=n=[function(e,t,n){"use strict";n.d(t,"l",function(){return q}),n.d(t,"i",function(){return V}),n.d(t,"k",function(){return K}),n.d(t,"j",function()...
...http://requirejs.org/docs/errors.html#mismatch
at makeError (VM39202 require.min.js:5)
at v (VM39202 require.min.js:5)
at VM39202 require.min.js:5

Site works as expected when removing the survey.

Desktop (please complete the following information):

• Embed SDK Version [latest from https://embed.typeform.com/embed.js]

Additional context
Production environment

Hi!

I am trying to embed the typeform chat with the div and script tags generated by the platform:

<div data-tf-chat data-tf-tooltip="Please consult with our digital assistance" data-tf-open="load" data-tf-popover="nxUDrRT2" data-tf-button-color="#FA6B05"></div><script src="//embed.typeform.com/next/embed.js"></script>

I have a Nuxt Js app with client side rendering (SSR = false) which means that the HTML is generated on the fly dynamically by Nuxt, and I don't have an index.html starter file where I could insert the div and the script. But even if I had, I can only insert them to a .vue component, because the typeform id is coming from a setting dynamically.

I was trying to insert this to my project and to other projects as well and the chat only appeared when the div and the script were put into a static .html file. I also tried to insert them with the DOM-s createElement method and construct the elements with their attributes dynamically AFTER the whole component has been rendered, but the chat was not appearing. The //embed.typeform.com/next/embed.js script is getting the right response (I can see from Network), so probably the problem is with targeting the div when there is no SSR but I cannot understand why. When I logged the targeted div to the console, the element was already present and I also tried to construct the script tag from code after this moment but nothing happened.

Is there somebody who could solve this problem? Or is the embed.js written to work only in static html-s?