Using Discourse variables to personalize embedded Typeform

제품 지원
1

In @sam’s example of an embedded Typeform, 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. 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.

2

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.

3

Thanks Sam. So something like this?

<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?

4

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

5

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

    <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.

7

나중에 이 글을 보시는 분들을 위해, @mark78님의 훌륭한 게시글의 업데이트된 버전을 공유합니다:

Admin > Customize > Themes > Edit CSS/HTML > HEAD 아래에 아래 코드를 추가하세요.

:bangbang: Enterprise 플랜을 사용 중이라면, 이 코드를 추가하기 위해 빈 테마 컴포넌트를 생성해야 합니다.

<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>
  • Typeform에 'username’이라는 숨겨진 필드를 추가하세요.
  • 게시글에 Typeform 링크를 단순히 공유하여 Typeform을 임베드하세요. Typeform 임베드 기능을 사용하지 마세요. 또한 관리자 설정에서 Typeform URL https://forms.typeform.com을 임베드로 허용해야 합니다.