Hi all,
I’m writing an AngularJS (v 13) application in which I plan to embed my typeform in a dialog box. I then want to make calls to the Response API so I can interpret that data client-side.
I had issues using the Vanilla Embed Library (embed showed up very small and even when trying to pass iframeProps things did not seem to be working.
iframeProps is listed as an object, but no matter how I formatted my style guidelines for it, it would say:
“Argument of type '{ container: HTMLElement; iframeProps: { style: string; }; }' is not assignable to parameter of type 'WidgetOptions'.
Object literal may only specify known properties, and 'iframeProps' does not exist in type 'WidgetOptions'.”
Here’s an example of how I had things looking:
ngOnInit(): void {
// make sure #form element exists in template
createWidget('<my form ID>', { container: document.querySelector('#form'), iframeProps: {style = "width:45em;height:45em;"}});
I just am not sure how to format the iframeProps. Even when I alternatively put the script in my HTML, passing something like this:
<script>
const { refresh, unmount } = createWidget('<my-form-id>', {
container: document.querySelector('#form'),
autoResize: true,
iframeProps: style="width:100%;height:400px;"
})
</script>
It didn’t impact it.
Eventually I just settled for extracting the iframe I saw upon inspection so I could actually change the CSS and this has worked:
<iframe
src="https://form.typeform.com/to/<my-form-ID>?typeform-embed-id=08414716288014312&typeform-embed=embed-widget&typeform-source=localhost&typeform-medium=embed-sdk&typeform-medium-version=next"
data-testid="iframe"
style="transform: translateZ(0px);width:46em;height:30em;"
></iframe>
I’m unsure if this will cause any problems. But the form seems to be working well.