Collecting data with the AI chat¶

With the Alan AI Web Chat, you can collect data from your website’s visitors using interactive conversations. For example, you may want to get users’ feedback on your products, conduct surveys and so on. Instead of using static web forms or having a sales representative ask the same questions to every visitor, you can embed an AI chat into your website or web app to automatically retrieve the relevant information from conversations with users 24/7 and save it for later use.

In this tutorial, we will build a replacement for a typical website comments form. Users will be able to provide their comments, names and email addresses in the AI chat, and this information will be saved to a Google spreadsheet using the Google Sheets API.

What you will learn¶

How to collect data from the AI chat for later use
How to capture email, name and comment values using the Alan AI Web Chat
How to pass collected data to your backend using an API call

What you will need¶

To go through this tutorial, make sure you have completed the following tutorial: Building an AI chat for a website.

Step 1. Get an OAuth 2.0 Client ID for Google apps¶

To be able to write data to a Google spreadsheet, we need to create a project in the Google Cloud Console, enable Google Sheets API for our project and get an OAuth 2.0 Client ID.

Go to the Google Cloud Console. If you do not have an account, you need to create a new one.
At the top of the page, click Create project.
In the Project name field, enter the name for your project and define the project location.
Open the created project and in the left menu, select APIs and Services > Enabled APIs and services. At the top of the page, click + Enable APIs and Services. In the search field, search for Google Sheets API and enable this API for your project.
In the left menu, select APIs & Services > oAuth consent screen. The consent screen will only be used by you to get an access token and refresh token. Configure the consent screen for your project:
1. Select the user type - Internal or External, enter the app name (for example, alan-ai-chat), user support email address, developer contact information and click Save and continue.
2. Skip the Scopes and Test Users steps and save the consent screen settings.
3. At the Summary step, click Back to Dashboard.
4. In the review page, under Publishing status, click Publish app.
In the left menu, select Credentials. At the top of the page, click + Create Credentials > oAuth Client ID. Configure the credentials record:
1. In the application type, select Web application.
2. In the Name field, provide any name you want, for example, Alan AI Chat.
3. Under Authorized Redirect URIs, click Add URI and enter https://developers.google.com/oauthplayground.
4. Click Create. In the displayed window, click Download JSON and save this file for later.
Next, we need to get a refresh token with appropriately selected scopes for Google APIs:
1. Go to OAuth 2.0 Playground.
2. In the top right corner, click the settings icon, select Use your own OAuth credentials and in the displayed fields, enter the values from the JSON file you downloaded previously: OAuth Client ID and OAuth Client Secret. Click Close.
3. In the main area, at the Select & authorize APIs step, select Google Sheets API v4 > https://www.googleapis.com/auth/spreadsheets. Click Authorize APIs.
4. In the displayed window, choose an account you used to create the Google Cloud project and allow the app to access your account.
5. At the Exchange authorization code for tokens step, click Exchange authorization code for tokens, copy the refresh token value and save it for later.

Step 2. Create a Google spreadsheet¶

We need to create a spreadsheet to which we will write data collected with the Alan AI Web Chat.

With the account you used to create the Google Cloud project, create a spreadsheet. In our spreadsheet, we will have three columns:

Name
Email
Comments

../../../_images/creating-spreadsheet.png

Step 3. Capture user’s data with the AI chat¶

To the dialog script in Alan AI Studio, we will add code to capture the following user’s data: name, email address and a comment the user wants to leave.

Dialog script¶

intent('I want to leave a message', async p => {

    // Capturing the user's name
    p.play('Please type in your name');
    let userName = await p.then(getName);

    // Capturing the user's email address
    p.play('Please type in your email address');
    let userEmail = await p.then(getEmail);

    // Capturing the user's message
    p.play('Please type your message');
    let userMessage = await p.then(getMessage);
    p.play(`Thanks, ${userName}! I got your message and will get back to you at ${userEmail} as soon as I can`);
 });

let getName = context((p) => {
    intent('$(USERNAME* .+)', p => {
        return p.resolve(p.USERNAME.value);
    });
});

let getEmail = context((p) => {
    const email = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    intent(`$(EMAIL* ${email.source})`, p => {
        return p.resolve(p.EMAIL.value);
    });

    fallback('Please provide a valid email');
 });

let getMessage = context((p) => {
    intent('$(MESSAGE* .+)', p => {
        return p.resolve(p.MESSAGE.value);
    });
});

Here, when the user says: I want to leave a message, Alan AI sequentially activates the getName, getEmail and getMessage contexts to capture the required values and save them to variables. To this, we use the NAME and regEx slots.

Step 4. Write captured data to a Google spreadsheet¶

We can capture the data we need; next, we need to write it to the spreadsheet.

To the dialog script, add the code to get a token for Google APIs with the client ID, client secret and refresh token we obtained in step 1.

Dialog script¶

// Getting a Google API token
const getToken = async () => {
    const data = {
        "client_id": "YOUR-CLIENT-ID",
        "client_secret": "YOUR-CLIENT-SECRET",
        "refresh_token": "YOUR-REFRESH-TOKEN",
        "grant_type": "refresh_token"
    }
    try {
        const response = await api.axios({
            url: "https://www.googleapis.com/oauth2/v4/token",
            method: "POST",
            data: data});
        return response.data.access_token;
    } catch(error) {
        console.error(JSON.stringify(error));
    }
}

Next, we need to write data to the spreadsheet. For this, we will add the updateSheetValues() function that uses the append method of the Google Sheets API. To send a POST request, we will use the built-in axios library.

Dialog script¶

// Writing data to a spreadsheet
const SHEET_ID = 'YOUR-SPREADSHEET-ID';

const updateSheetValues = async (name, email, comment) => {
    const token = await getToken();
    const data = {
        majorDimension: "ROWS",
        range: "YOUR-SHEET-NAME!A1:A3",
        values: [
            [name, email, comment]
        ]
    }
    try {
        const response = await api.axios({
        url: `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/YOUR-SHEET-NAME!A1:A3:append`,
        method: "POST",
        headers: {
            "Content-Type": "application/json",
             Authorization: `Bearer ${token}`,
        },
        params: {
            valueInputOption: "USER_ENTERED"
        },
        data: data});
        console.log(response.data);
    } catch(error) {
        console.error(JSON.stringify(error));
    }
}

Here, we first call the getToken() function to generate a new token using the refresh token we have. After that, we use the append method to write data passed to the function to the spreadsheet.

Finally, we will update the I want to leave a message intent to call the updateSheetValues() function after all the required data is collected:

Dialog script¶

intent('I want to leave a message', async p => {
    p.play('Please type in your name');
    let userName = await p.then(getName);
    p.play('Please type in your email address');
    let userEmail = await p.then(getEmail);
    p.play('Please type your message');
    let userMessage = await p.then(getMessage);

    // Calling updateSheetValues() to write data to the spreadsheet
    updateSheetValues(userName, userEmail, userMessage);

    p.play(`Thanks, ${userName}! I got your message and will get back to you at ${userEmail} as soon as I can`);
 });

You can test how it works: in the Alan AI Web Chat type: I want to leave a message, then provide a name, email address and message. Open the spreadsheet and make sure your data is saved to it.