Google Sheets Integration

We installed the Velo package on our site, and followed the steps described in the Setup section of the package’s readme file.

Page Elements

 

We added the following elements to our site:

• 2 text inputs for entering the name and phone number to add to the sheet.

• Button to trigger the addition.

• Text element to enter the name whose phone number you want to get.

• Button to trigger the get.

• Text element for displaying the retrieved phone number and validation messages.

 

Code

 

We added the following code to a web module (.jsw file) on the backend of our site:

1. Import the wix-secrets-backend module to work with secrets from the Secrets Manager .

2. Import the getValues() and appendValues() functions from the Velo package.

3. Define the range of the Google spreadsheet.

4. Add a function to get a phone number from the sheet: Validate the name passed to the function, get the Google Sheet ID from the Secrets Manager, use the getValues() package function to loop through the names in the sheet, and if the name exists in the sheet return the phone number associated with the name.

5. Add a function to append a phone entry to the sheet: Validate the input values, get the Google Sheet ID from the Secrets Manager, and use the appendValues() package function to add the new name and phone number to the sheet.

 

We added the following to our page code:

1. Import the wrapper functions from the web module.

2. When a site visitor enters a name and phone number and clicks the Add button, collapse the message text, call the backend function to append the data to the sheet, clear the input values, and show a success or error message.

3. When a site visitor enters a name and clicks the Get button, collapse the message text, call the backend function to get the associated phone number, and display the retrieved number or an error message.