Answered

Using typeform to create "badged" social media images

  • 30 August 2022
  • 5 replies
  • 29 views
J
Userlevel 1

I know this is not a feature of Typeform, but I was thinking this might be possible with some API integration or Javascript. I’d like to allow people, after doing a quiz, to upload a photo, and then apply an overlay image on the photo depending on the results of the quiz. Then I’d like the user to be able to save it. 

 

Before I go down the rabbit hole, has anyone done anything like this?

icon

Best answer by mathio 31 August 2022, 15:09

View original

5 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @jplumey Oh, this is an interesting idea! I can’t say I’ve seen anyone in the community post something like this, but @mathio or @picsoung may have seen something like this before!

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

I haven’t seen anything like this before, but I suppose you could:

  • retrieve response ID in onSubmit callback
  • retrieve the response via Responses API using the ID
  • generate overlay over the image using data from previous step
J
Userlevel 1

Thanks for the reply @mathio, I will take a look those links. Looks like I need to embed the typeform in a container, since I don’t think there’s any kind of ability to run JS within Typeform itself, correct?

mathio
Rank
Userlevel 7
Badge +5

Thats true, you need to embed to use onSubmit callback.

Alternatively you could setup a webhook andreceive each response to your own endpoint and process everything there.

J
Userlevel 1

I think what’s going to be easiest is to create a custom link to a simple web app that allows them to do this, rather than trying to have them upload the image through TF. So, at the end of the quiz, depending on their result it would generate a URL like https://somehost/makebadge?badge=<valuefromtypeform>, and then it would present a UI to upload or take a picture and then apply the badge.

Thanks for all your feedback!

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs