# Using Discourse variables to personalize embedded Typeform

**URL:** https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329
**Category:** Support
**Created:** [March 12, 2019, 12:37am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329 "2019-03-12T00:37:24Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![markschmucker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/markschmucker/32/141599_2.png) [@markschmucker](https://meta.discourse.org/u/markschmucker)
#### Post date: [March 12, 2019, 12:37am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/1 "2019-03-12T00:37:24Z")

</div>

In @sam’s [example of an embedded Typeform](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/48), the url for the Typeform is:

`https://basvanleeuwen1.typeform.com/to/NzdRpx?typeform-embed=embed-widget`

That’s great, but I would like to personalize my Typeforms using [hidden fields](https://www.typeform.com/help/what-are-hidden-fields/). If the Discourse username could be added to the url, then I could use it in the form. So when I visit, the url would be:

`https://basvanleeuwen1.typeform.com/to/NzdRpx?typeform-embed=embed-widget&username=markschmucker`

Is there a way to do that? Is it a candidate for a plugin?

Note you need a paid Typeform account for this to work.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 12, 2019, 1:23am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/2 "2019-03-12T01:23:13Z")

</div>

Sounds a bit too fancy to be in the core onebox, the good news is that you will probably not need a plugin here a theme component can do the trick.

---

<div class="post-metadata">

### Author: ![markschmucker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/markschmucker/32/141599_2.png) [@markschmucker](https://meta.discourse.org/u/markschmucker)
#### Post date: [March 12, 2019, 2:52am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/3 "2019-03-12T02:52:47Z")

</div>

Thanks Sam. So something like this?

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--3-b):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

```
<script type="text/discourse-plugin" version="0.8">
  $( document ).ready(function() {
    const user = api.getCurrentUser(),
      username = user.username;

    $('h1.hello-world').html('Hello there '+username+"!")
  });
</script>

```

Except find and replace the url instead of saying Hello?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 12, 2019, 3:23am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/4 "2019-03-12T03:23:49Z")

</div>

Yeah this is not the approach I would take, what you are looking for is decorate cooked in the plugin API.

---

<div class="post-metadata">

### Author: ![Mark\_Schmucker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mark_schmucker/32/124810_2.png) [@Mark\_Schmucker](https://meta.discourse.org/u/Mark_Schmucker)
#### Post date: [March 17, 2019, 3:57am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/5 "2019-03-17T03:57:27Z")

</div>

Here is my (somewhat clumsy) solution, in case it helps someone. I added this code under Admin \> Customize \> Themes \> Edit CSS/HTML \> /head:

```js
    <script type="text/discourse-plugin" version="0.8">
        api.decorateCooked($elem => {
            var i, j;
            var selector = 'https://example.typeform.com';
            // seems like this should work but it doesn't:
            // var typeforms = $elem[0].querySelectorAll('src^=[' + selector + ']');
            var ps = $elem[0].querySelectorAll('p');
            for (i=0; i<ps.length; i++) {
                p = ps[i];
                var iframes = p.querySelectorAll('iframe');
                for (j=0; j<iframes.length; j++) {
                    var iframe = iframes[j];
                    if (iframe.src.startsWith(selector)) {
                        var oldsrc = iframe.getAttribute('src');
                        var username = api.getCurrentUser()['username'];
                        var newsrc = oldsrc + '?username=' + username;
                        iframe.setAttribute('src', newsrc);
                    }
                }
            }
        });
    </script>

```

Then add a Hidden Field “username” in your Typeform. The username can be used in your form, and will also be sent to the destination (integrations or webhook) when the user hits Submit.

When you get the Typeform link to embed in Discourse, it will be something like:

`https://example.typeform.com/to/dr8oAa?username=xxxxx`

Remove the ?username=xxxxx before embedding; the js above will add it back, with the proper Discourse username.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [May 6, 2022, 10:14am UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/6 "2022-05-06T10:14:44Z")

</div>



---

<div class="post-metadata">

### Author: ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [June 25, 2024, 7:42pm UTC](https://meta.discourse.org/t/using-discourse-variables-to-personalize-embedded-typeform/111329/7 "2024-06-25T19:42:54Z")

</div>

Anyone else coming across this later, I have an updated version of @mark78’s awesome post:

Add this code under Admin \> Customize \> Themes \> Edit CSS/HTML \> HEAD

> ‼ If you are on enterprise, you’ll have to create an empty theme component to add this.

```html
<script type="text/discourse-plugin" version="0.8.25">
    api.decorateCooked(($elem) => {
        const iframes = $elem[0].querySelectorAll('iframe[src^="https://form.typeform.com"]');
        const userName = api.getCurrentUser()?.username;
        
        if(!userName){ return; }
        
        for (let i = 0; i < iframes.length; i++) {
            iframes[i].setAttribute('src', `${iframes[i].getAttribute('src')}&username=${userName}`);
        }
    });
</script>

```

- Add a [hidden field](https://www.typeform.com/help/a/using-hidden-fields-360052676612/) of ‘username’ in your Typeform
- Embed your Typeform on your post by simply sharing the link. Do not use the Typeform embed feature. You will also need to allow the Typeform URL `https://forms.typeform.com` as an embed in your admin settings.