Skip to main content
Answered

AngularJS (v 13) -- Embedding Issues & Workarounds?

  • 20 March 2022
  • 4 replies
  • 257 views

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&amp;typeform-source=localhost&amp;typeform-medium=embed-sdk&amp;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.

4 replies

mathio
Rank
Userlevel 7
Badge +5

Hello @rholo 

thank you for reporting this. The “iframeProps” option seems to be missing in our embed types. We will fix this, however in the meantime feel free to disregard this error (or explicitly cast to WidgetOptions or any to suppress the error message).

R

Great, do you have an idea of how I would go about explicitly casting? I’ve done a few Angular projects but am by no means an expert and wasn’t sure exactly what that would look like.

I’ll try using any and seeing if that helps, I would ignore the error but it doesn’t compile with it (probably just a linting issue but using the iframe directly works!)

mathio
Rank
Userlevel 7
Badge +5

Something like this should work:

const options = { 
  container: document.querySelector('#form'), 
  iframeProps: {
    style: "width:45em;height:45em;"
  }
} as WidgetOptions // or "as any"

createWidget('<my form ID>', options);

 

mathio
Rank
Userlevel 7
Badge +5

Hello,

setting style as string is available in latest version of @typeform/embed lib. However per MDN docs, setting styles directly is not advised.

If you want to set your embed size, the recommended way is to set the size of parent DIV (in your case #form). Then make sure you loaded widget embed CSS from @typeform/embed/build/css/widget.css

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs