Cannot pass other props other than "style" in iframeProps on Typescript embed SDK | Community
Skip to main content
Answered

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

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

Best answer by mathio-tf

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 😃

View original

6 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14840 replies
  • July 21, 2023

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

Life is a series of awkward moments separated by snacks.
mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • July 21, 2023

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.

Liz
1 person likes this
  • Liz
    Liz
H
  • heitor
  • Author
  • Explorer
  • 2 replies
  • July 26, 2023

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-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • Answer
  • July 26, 2023

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 😃

Liz
H
2 people like this
  • Liz
    Liz
  • H
    heitor
H
  • heitor
  • Author
  • Explorer
  • 2 replies
  • July 28, 2023

Hey @mathio !

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

Thank you very much!

Liz
mathio-tf
2 people like this
  • Liz
    Liz
  • mathio-tf
    mathio-tf
Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14840 replies
  • July 31, 2023

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