Lesson 7.1 How to use a webview to get form field data

For one of our most prestigious real estate projects, we had the need for getting subscriber data all in one place. The use of a webform soon came to mind and it is basically the only way to get your use data in a fast, reliable and nicely formatted way.

Another project we did for a big Facebook Ads coach, required the need for multi-select variables. Like: What are you  interested in most? The  answer to this question did not suffice with just one answer. One could be interested in Selling, Marketing and Gaining Knowledge as a whole.

The above mentioned cases all required the very nice feature that is a webview ;-).

Complete ZIP with the lesson files are at the bottom for you (Silver Members) to download

How do you start setting this up the right way?

In able to setup a good webview, you need a few things. These are:
• the Facebook Messenger SDK JS-code;
• your ManyChat API and an API script to update the subscriber's custom fields;
• an HTML page (yes, you'll need hosting of some kind) with an HTML form.

Once you have this, you're already half way.

Let's start with the FB Messenger SDK code, you'll find that below highlighted in the script section of the PHP/HTML sample page, or you can do a Google search and find it on the FB Developer pages and start building your own.

We call this script "webview.php"

Now you have your full HTML page with a couple of questions. Each one appears after the previous one has been answered. The name of the custom fields have the "mcc_" prefix, those variables need to pre-exist in your ManyChat custom field list.

To make it look a little prettier, here's the css code that you can include in your page. Just copy it in a file named "webview.css" and put it in the same folder as the webview.php page.

Awesome, almost there!

We now have our webview.php and webview.css files done. Your basic questions are displayed and people can start answering them. That is great, but .. then what?
You now need to process these questions in your form so that ManyChat will save them for you. This is what the script in line 197 of the webview.php file does for us.

We called this script "process-coaching-questions.php"

It's an AJAX call to a PHP script that takes care of the saving of custom user fields by utilizing the API. Let's have a look at the script.

Let's recap

In this lesson you saw three different files:
• The main webview.php file that holds the form;
• The webview.css file to make it look pretty;
• The process-coaching-questions.php file to handle your AJAX request to the API calls.

All three files are needed to get this to work the way you want it to work. Meaning: it will get the userdata, save it to the corresponding Custom User Fields, close the webview and send your user to a new flow automatically.

You can of course opt to NOT send your user to a new flow, in which case you will comment out the following line (line 88) from the PHP file which handles the AJAX request. Like this

// sendUserToFlow($mc_uid, $flow_ns, $mc_api);

You may have some questions, let's try to answer them before you think of them 🙂

Q: Is see a reference to $mc_uid = $_REQUEST['psid'], but also to this $mc_uid = $_GET['id'] , isn't that the same?
A: Yes, and No. In the First file (webview.php), we are getting the PSID via the messenger SDK, but that only works inside a mobile client, so we just double-featured that variable to have some sort of backup plan. Better safe than sorry!

Q: How do I call my webview page from within ManyChat?
A: You select the "Open Website" action for a button block, in the "Website address" fiueld you fill in the link to your website and you append the user ID and the optional flow ID to send the user to after filling in the form fields. For example:
https://mycoolwebview.com/webview.php?id={{User ID}}&flow_ns=content987654_123456

For the webview Size you select anything (Full, Medium, Compact), as long as it is NOT "Native"

Q: There is also an API 'something' on top of the First page, what do I fill in there?
A: Right. Where it says "ABC:1234567890", you put your own API key. You will find your API key in your ManyChat account, under Settings > API. It says: Get Token.

That's it in a nutshell! Go make something cool. Change the form fields with anything you can come up with and make sure your input name values match those of your custom user fields. Also, if you do not use an "mcc_" prefix, make sure you use a prefix that you can easily identify and change that prefix in the PHP file that handles your form processing. As you can see, in the functions inside that PHP file, we loop through the form field variables looking for anything that matches the unique prefix (mcc_ in our case). It's not too difficult, but it MUST match. It's on line 75:

if(strpos($k, 'mcc_') === 0) { // only process mcc_ variables