how to embed a typeform widget in angular4

Question

I've marketing dept asking to integrate typeform into a static page, something they can build quickly and then embed into the page, I use aot angular4, will be a dynamic inject from the CMS, so means need a way to support any kind the widget, the widget has script, looks like:

        <div class="typeform-widget" data-url="https://xxxxxxx.typeform.com/to/CCiqgs" style="width: 100%; height: 500px;"> </div>
        <script>
            (function () {
                var qs, js, q, s, d = document,
                    gi = d.getElementById,
                    ce = d.createElement,
                    gt = d.getElementsByTagName,
                    id = "typef_orm",
                    b = "https://embed.typeform.com/";
                if (!gi.call(d, id)) {
                    js = ce.call(d, "script");
                    js.id = id;
                    js.src = b + "embed.js";
                    q = gt.call(d, "script")[0];
                    q.parentNode.insertBefore(js, q)
                }
            })()
        </script>
        <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by
            <a href="https://www.typeform.com//?utm_campaign=CCiqgs&amp;utm_source=typeform.com-11265281-Basic&amp;utm_medium=typeform&amp;utm_content=typeform-embedded-poweredbytypeform&amp;utm_term=EN" style="color: #999" target="_blank">Typeform</a>
        </div>

Means we to find a way to support this without making a new release or build the app every time for a new widget is embedded or changing the ts for just a simple widget, in fact, we should support any kind of widgets.

Any ideas? I'll appreciate all your help. Thx

Answer 1

You can use the Typeform Embed SDK

Install via npm in your Angular project:

npm install --save @typeform/embed

Then you can import the TypeformEmbed into the component where you launch the form:

import * as typeformEmbed from '@typeform/embed'

If you need it as a popup when you load your page, call the SDK in the AfterViewInit callback:

ngAfterViewInit(): void {

   typeformEmbed.makePopup('<your typeform url here>', {mode: 'popup', autoOpen: true})
}

Answer 2

you could use the solution with the iframe which is suggested on their website under the custom embedding section here.

#my_typeform {
display: inline-block;
width: 800px;
height: 600px;
margin: 60px;
}

<iframe id=”my_typeform” src=”https://yourname.typeform.com/to/abc123″></iframe>

But I believe you could also do it with sanitization which is explained into detail on this blog.

Hope it helps, have a great day. :)