Answered

Display a personally crafted (not chosen among a set) recommendation after a Typeform.

  • 27 November 2023
  • 8 replies
  • 67 views

Userlevel 1
Badge

Hello,

I use Typeform this way: the Typeform is embedded in a webpage (iframe https://www.ridingmatch.com/questionnaire), responses are analyzed in google sheets and a personalised recommendation is then automatically sent by email to respondents through a google apps script. There aren’t any preset recommendations. All recommendations are different and change all the time.

Now I'd like to replace the email process by displaying the personalised recommendation on a webpage of my website. So the respondents would fill the form, send it and after a few seconds the personalized recommendation would appear on a page on the same website where the typeform is embedded.

How would you advise me to do that? How do I ensure the respondent sees his personal text? respondent token?

I’m a beginner in coding and used javascript on google apps script to send personalized emails so I’d like to continue with google apps script/javascript to display the personalized recommendation on a webpage instead of sending emails.

Thanks!

Stephane

icon

Best answer by mathio 29 November 2023, 10:19

View original

8 replies

Userlevel 1
Badge

Refresh: after that post I was able to display a webpage through JSON data sent via a doget() on google apps script upon webpage loading. Now I stil have to ensure that the content loaded on the webpage is the respondent’s recommendation only.

Userlevel 7
Badge +5

Hi @Stefride love the idea of displaying the personal recommendation on the webpage where the typeform was! 

Tagging in @mathio - do you know if something like this is possible to set up?

Userlevel 1
Badge

Thanks Grace!

@mathio  seems to be the right person to help me. I found another conversation that seem to be related to my question:

That could probably help me but as i’m a beginner in coding I need more detailed explanations on the different steps:

  • creating a hidden field with the ‘response Id’ to be sure I find that ‘response Id’ in my google sheets
  • passing that ‘response Id’ to a url where the personal recommendation will be displayed or, if the respondent can remain on the same page, passing that ‘response Id’ to the doget()/dopost() function of my script in Google apps script.

Thanks!

 

Stef

Userlevel 7
Badge +5

Hello @Stefride 

first you need to connect your typeform with Google Sheets. You will find the response ID in column named Token in your spreadsheet (should be the last column). There is nothing else to setup.

To handle the frontend login in your web application you can use the onSubmit callback of our Embed SDK. You can either redirect to a new page (like the example you linked in your post) or build custom logic to fetch the data from a custom API endpoint and display it in your web app.

I am sorry, but not familiar with Google Apps scripts. Can you please share more details here, maybe even the whole code if possible?

Userlevel 1
Badge

Thanks @mathio for your quick reply!

  1. The link to google sheets is OK and I have the Token column. it’s perfect if I can use it as a unique identifier.
  1. The page where the Typeform is embedded is: https://www.ridingmatch.com/questionnaire

(the page where the recommendations would be displayed if that solution is chosen: https://www.ridingmatch.com/recos)

I’m aware I have to use the callback function but not sure where exactly on the Typeform page and if I need to erase other lines when I insert the code showed on Vanilla.

  1. Google apps script uses a form of JS with custom google functions. Below is the code I tried with email as identifier but it doesn’t work for me as a respondent may fill several forms so the Token seems to be what I need.

So my problem now is to catch the Token after submission and for example add it to the redirect page URL to identify the form. If I can do that I’ll find a way to extract it from the URL with my script to display the proper recommendation. I’m interested in the other option you mentioned (without redirect page) but I would need more step-by-step guidance.

Thanks for your help!

 

Stef

 

var sbi SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/myspreadsheetexample')

var sheet = sbi.getSheetByName('sheet where I store the recommendations data');

var

var

var

//all the variables to state in which columns the recommendations data is stored 

 

function doGet(e) {

  // Get the unique identifier from the URL parameters

  var identifier = e.parameter.id;//I tried that with email as identifier but it doesn’t work for me as a respondent may fill several forms. So the token is a good solution.

  // Check if the identifier is valid (you need to implement this function)

  if (isValidIdentifier(identifier)) {

    var lastRespRow = isValidIdentifier(identifier);//row where the recommendation of the respondent we are looking for is stored

    // Get the data from the respondent row we’re interested in

    var submitAt = sheet.getRange(lastRespRow, submitAtColumn).getValue();

    var typefToken = sheet.getRange(lastRespRow, typefTokenColumn).getValue();

       var recipientEmail = sheet.getRange(lastRespRow, recipientColumn).getValue();

    var firstName = sheet.getRange(lastRespRow, firstNameColumn).getValue();

    var … //all the variables to get the data from the row of the identifier

 

    // Display the recommendation

    if (flagValue !== "") {

      //Create the HTML table:

      var emailTemplate = HtmlService.createTemplateFromFile('emailtemplate');//create a HTML file from the data (I had done that to send recommendations by email, I kept it that way)

      

      // Compose the message to display

      var message = emailTemplate.evaluate().getContent();

      var jsonResponse = {

        title: 'Email Template Page',

        content: message

      };

 

      // Convert JSON to string

      var jsonString = JSON.stringify(jsonResponse);

      // Set Content-Type header to application/json

      var output = ContentService.createTextOutput(jsonString).setMimeType(ContentService.MimeType.JSON);

      return output;

    }

  } else {

    // Handle unauthorized access

    return HtmlService.createHtmlOutput('<h1>Unauthorized Access</h1>');

  }

 

  function isValidIdentifier(identifier) {

//function to look for the row where the identifier is located

         }

  }

 }

 

Userlevel 7
Badge +5

I looked at your page and I see your embed code snippet. You can modify it like this to add the onSubmit callback:

<div data-tf-widget="TwBFvlO8" data-tf-opacity="100" data-tf-hide-headers data-tf-iframe-props="title=Quizz Ton type de vélo" data-tf-transitive-search-params data-tf-disable-scroll data-tf-auto-resize data-tf-medium="snippet" data-tf-on-submit="didSubmit" style="width:100%;height:545px;"></div><script src="//embed.typeform.com/next/embed.js"></script>
<script>
function didSubmit(data) {
// modify the line below to properly handle the redirect
window.location.href = "http://example.com?responseId=" + data.responseId
}
</script>

 

Userlevel 1
Badge

Excellent!!! I’m beginning my coding journey and the support from experienced coders like you is so valuable. Thank you so much to have helped me achieved what I had in mind.

Userlevel 7
Badge +5

So great to hear @Stefride, let us know how you get on!

Reply