Welcome to the Super 8 tutorial, in this section, you will know how to set up Webview Editor.
Webview Editor allows you to set up various types of questions, pictures or videos to form a form that meets your needs. Customers can quickly fill in the information in the questionnaire without going through a lengthy question-and-answer process.
When submitting the form, the answers provided by the customer will be automatically synchronized to the personal data field in the Super 8 platform or to the Google spreadsheet you linked to.
Let us take a look at the setup process description below!
I. Add Webview Editor
Open "Webview Editor" on Super 8 platform and click "Add Webview Editor"
You can edit the name of the Webview Editor, which will be synchronized in the frontend/backend title after saving.
Then we will provide you with three template options: blank, personal data, and questionnaire. All three templates can add fields, delete fields, change field content or text content.
Each field can be set to be required. When the required field is turned on, and asterisk (*) will appear in the field. If the customer does not fill in, it cannot be sent.
If the field is set to be required, * will be displayed in the field shown the demo screen on the right
To move/delete a field, click the up and down arrows on the right of the field to move, and click "X" to delete the field.
The following will explain several fields that need to be paid attention to when setting:
1. Customer birthday
When choosing a birthday from the customer's point of view, you can continue to click "Year" to switch the time zone.
2. Hyperlink
Please note that the hyperlink must start with https. If the URL link does not start with https, it is recommended to use bitly to shorten the URL link.
3. Customized question
When setting the field of the customized question, the page will ask for the parameter name. Please fill in the parameter name here in English and customize the name.
So, the value filled in by the customer in this field will be stored as an attribute. Then, select the attribute in the editor and fill in the parameter name to retrieve the stored value for use. Therefore, after you create many Webview Editors, you need to pay special attention to whether there is any duplication of parameter names.
For example, the parameter name is "time"
Fill in the parameter name "time" as the attribute, then the value entered by the customer can be taken out and used
Check box, drop down menu
After each option, there is a field of "Fill in label name", which can be selected by yourself. If the label name is filled in, when the customer selects an option, the chatbot will automatically mark the corresponding label.
Suppose a customer chooses the "A. Facial cleanser" option, the bot will automatically label as "Facial cleanser"
4. Image
There is no limit on the size of the image. After uploading, you can choose whether to display the image in the "original size" or in the "fit to" phone screen. Image description is optional.
5. Video
The video can choose to use Facebook or YouTube video link. If you use the YouTube video link, please copy the URL in the address bar above, do not use the short URL of the sharing function below.
6. Customer's address
Since the country option in this field is currently only Taiwan, if your customer is from other country, it is recommended to use "Customized Question" > "Short Answer" in settings first. At the same time, you can contact the Super 8 team to inform your country name requirements, and we will add more options.
7. Customize the customer field
When you select a custom customer field, the information in this field will be saved as attributes. Then select the attribute in the editor and fill in the parameter name to retrieve the stored value for use.
8. Send button
In situations that do not require customers to fill in information, for example, when using Webview Editors for information-providing purposes such as announcements and introductions, you can choose to hide the "Send Button".
II. Save
After designing your own "Webview Editor", please click Save
III. Copy Questionnaire Link
After saving, please click "Copy Questionnaire Link" and put this link into the URL button in the card. When customer receives a broadcasted message or a card message sent by the chatbot, they can click on the link to open the "Webview Editor" and fill it in.
Please pay attention to the following two points:
1. The questionnaire link is valid for only 7 days. Customer cannot open the questionnaire after 7 days. Please trigger the chatbot to resend the card.
2. The copied questionnaire link can only be opened in the form of a card. If you click the link directly, the questionnaire cannot be opened.
Put the URL link into the URL button in the card (bot editor)
Put the URL link into the URL button in the card (Broadcast Messages)
Broadcast Messages editing screen
If your questionnaire contains fields such as customer name, customer phone number, customer email, customer birthday, and customer gender, the information the customer filled in will be automatically synchronized to the personal data field in the Super 8 platform when the customer clicks to send.
Customer fills in personal information
Data is automatically synchronized to the personal data field on the right
IV. Link to Google Spreadsheet
In addition to the fields mentioned above that will automatically synchronize data, if you want to see the data in other fields, you can use the "Link to Google Spreadsheet" function.
1. Select the time zone of the time when the customer fills in the form displayed in the Google Spreadsheet. The default GMY+8:00 is Taiwan time.
2. Click "Link to Google Spreadsheet"
3. Select Google account
4. Click Allow
5. Create Google Spreadsheet
Click "Google Spreadsheet (green text)"
Add a blank spreadsheet
Click "Share"
Click "Open Shared Link"
Select "Anyone with the link can view"
Click "Copy Link"
After connecting to the Google Spreadsheet, do not hide column A on the far left of the spreadsheet. Since the system adds data based on column A when importing data, if you hide column A, it will cause data duplication. Please pay extra attention.
6. Paste the link to the Google Spreadsheet and press Confirm
Show that the Google Spreadsheet has been successfully linked
If you want to change the Google Spreadsheet, please click Disconnect, and then reconnect again.
If you want to change your Google account, please click "Sign out" first, and then reconnect settings.
V. Created Webview Editor
Click on the "Webview Editor" tab, it will display all the Webview Editors in operation. You can modify the name of the questionnaire and use the button function on the right.
"Share the Webview Editor" to the Super 8 technical team for review
Copy "App Link" and put this link into the URL button in the card
Edit Webview Editor
Delete Webview Editor
After setting up the "Webview Editor", you should first test it yourself. After the test, please confirm that the data has been synchronized to the personal data field or Google spreadsheet.
It is normal that the following authentication screen appears during the test, please click "Agree".
If the authentication screen does not appear, it means that you have not turned on the LIFF function, which may cause the failure of the "Webview Editor". Please go to the LINE@ backend, click "Messaging API Settings" and then click "LINE Developers".
Then click on the "LIFF" tab, and then click "add" and the information in the red box will appear, which means that the LIFF function is enabled.
Extended reading:
Reminder
1. If your Google Spreadsheet has many tabs, the system will automatically synchronize the data to the leftmost tab.
2. Please note: If you put a "Webview Editor" link in the card and use the label field function in the card, after the customer clicks the card button to submit the form, it will be unable to automatically label LINE customers. This is because it is restricted by LINE API of LINE, and Messenger customers are not subject to this restriction.
3. After you have published the Webview Editor, it is recommended not to change the content in the Webview Editor to avoid the occurrence of misplaced data fields.
Hope the above information helps you!
If there are other questions, please feel free to contact the online customer service through "Facebook Chat Plugin" at the bottom right of the Super 8 platform.
Super 8 Messenger: https://m.me/no8.io
Super 8 Line@: https://m.me/no8.io