Answered

Cannot pass other props other than "style" in iframeProps on Typescript embed SDK

  • 20 July 2023
  • 6 replies
  • 108 views
H

Hello!

I am using the embed SDK for Typescript and embedding my form on an Angular app.

I use Hotjar and in order for it to render iframe contents a property data-hj-allow-iframe must be passed to the iframe. While trying to add it I noticed only “style” prop can be provided. I think it’s a bug on the bindings but I am no expert in Typescript. Could anyone please verify?

Check out the example on this Hotjar doc:

<iframe src="https://example.com/page.html" data-hj-allow-iframe=""></iframe>

Thank you!

Heitor

icon

Best answer by mathio 26 July 2023, 21:06

View original

6 replies

Liz
Rank
Userlevel 7
Badge +5

@mathio or @picsoung can help you out with this!

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

Hello @heitor 

in the embed SDK options you can find an option called iframeProps. All props provided here will be added to the iframe. In your case something like this:

<div data-tf-widget="<id>" 
     data-tf-iframe-props="data-hj-allow-iframe="></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Let me know if this works.

H

Hey @mathio thanks for the reply.

I am using the typescript binding and seems like the only prop accepted is “style” as per the types.

The error on the highlighted line is:

Type '{ 'data-hj-allow-iframe': string; }' is not assignable to type 'Partial<HTMLIFrameElementWithStyleString>'.
  Object literal may only specify known properties, and ''data-hj-allow-iframe'' does not exist in type 'Partial<HTMLIFrameElementWithStyleString>'.ts(2322)

I should somehow be able to skip typescripts’s type validation and go straight to the JS embed SDK, but it doesn’t seem right.

Does that make any sense or am I just missing something? Sorry I am no expert in none of these languages.

 

Regards,

Heitor

mathio
Rank
Userlevel 7
Badge +5

Hi @heitor 

I think the correct usage is to use camelCase instead of kebab-case for the attribute name. In your case it should be named dataHjAllowIframe like this:

createWidget(environment.typeform, {
  // ...
  iframeProps: {
    dataHjAllowIframe: true
  }
})

 

Regarding the typings - try using the latest version of the library, we recently updated the type to allow data attributes. Alternatively, you could just cast it as any it should not affect functionality 😃

H

Hey @mathio !

I just updated from 2.13.0 to 2.16.0 as it worked perfectly!

Thank you very much!

Liz
Rank
Userlevel 7
Badge +5

Glad to hear it, @heitor ! Thanks, @mathio !

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs