Skip to content

Commit

Permalink
updated the doc for link to google sheets (#109)
Browse files Browse the repository at this point in the history 
* Update 02. Speed Sends.md

updated the first two images, stopped in middle because new "quick sends" messages created are not getting reflected in the chat window

* Update 02. Speed Sends.md

corrected the images

* Update 12. Link Google Sheets.md

updated changes till "add readable google sheets" and "configure readable google sheets"

* Update 12. Link Google Sheets.md

made changes till "enable google sheets api and add credentials"

* Update 12. Link Google Sheets.md

Changes made to the remainder of the documentation

* Update 12. Link Google Sheets.md

added pic for step 13 under link writeable google sheets

* Update 12. Link Google Sheets.md

missed an ending tag for one of the images

* Update 12. Link Google Sheets.md

trying to solve for errors that is blocking deployment

* Update 12. Link Google Sheets.md

added <MDXLayout> tags

* Update 12. Link Google Sheets.md

changed the iframe syntax

* Update 12. Link Google Sheets.md

removed <mdxlayout> tag

* Update 12. Link Google Sheets.md

got the code for adding youtube video from another doc

* Update 12. Link Google Sheets.md

end tags missing
  • Loading branch information
@mahajantejas
mahajantejas authored Mar 5, 2024
1 parent 268acad commit e89b140
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 67 deletions.
9 changes: 4 additions & 5 deletions docs/3. Product Features/02. Speed Sends.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
> ### **2 minutes read &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `Beginner`**
> ### **2 minutes read &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `Beginner`**
Speed Sends is a functionality in Glific to create a message or save the messages and reuse it in future chats.

## Create Speed Sends

1. Create a Speed Sends message. Click on the `+CREATE SPEED SEND` button.

<img width="1467" alt="SS SC1" src="https://github.com/glific/docs/assets/132430123/c1e4827b-9d6f-4858-a2c8-1238a9601203" />
1. Create a Speed Sends message. Go to `Quick tools`, find `Speed Sends` click on `+Create`

<img width="1445" alt="Screenshot 2024-02-29 at 1 22 27 PM" src="https://github.com/glific/docs/assets/141305477/bfa05e33-b5ab-4ebb-acf0-50f72a9ea7d9" />


2. Fill in the details of the Speed Sends message.
Expand All @@ -18,7 +17,7 @@ Speed Sends is a functionality in Glific to create a message or save the message
1. Provide the URL of the message in the `Attachment URL` field.


<img width="1263" alt="SS SC2" src="https://github.com/glific/docs/assets/132430123/8fb610db-ca88-457d-8a98-9ad6d49c290d" />
<img width="1293" alt="Screenshot 2024-02-29 at 1 14 01 PM" src="https://github.com/glific/docs/assets/141305477/c9d05841-b981-4cd8-b716-18cd8d37bf96"/>



Expand Down
116 changes: 54 additions & 62 deletions docs/3. Product Features/03. Flows/2. Flow Actions/12. Link Google Sheets.md
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
> ### **5 minute read &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `Advanced`**
> ### **10 minutes read &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `Intermediate`**
___

## Video Tutorial


<iframe width="800" height="500" src="https://www.youtube.com/embed/tdFPJg1aLXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


_Please note: Glific has a new UI, so the visuals from the video will not match the present UI, but the functionality and buttons will remain the same_
___

## Add Readable Google Sheet

1 . Log in to your Glific account.

2 . Click on `Flows` from the left panel

![image](https://user-images.githubusercontent.com/32592458/219550636-0748c911-8170-4cca-b4ba-f960ab51ec97.png)
2 . Click on `Flows` from the left panel and find `Google sheets`

3 . From the bottom of the `Flow` page. Click on `Google Sheet` link.
4 . Click on `+Create` button to add a sheet to read from

![image](https://user-images.githubusercontent.com/32592458/219550651-2b7ea8e7-cfa5-4353-bbce-bf95858dcf82.png)
<img width="1468" alt="Screenshot 2024-02-29 at 1 35 52 PM" src="https://github.com/glific/docs/assets/141305477/d0605089-b71e-41ba-85c2-593dabf49b40" />

4 . Click on `Add Sheet` button

![image](https://user-images.githubusercontent.com/32592458/219550669-89eb822d-8da1-4201-b3f6-bf8332e41f31.png)
5 . Add the `Sheet URL` and `Name` of the sheet which you want to integrate. Check the `Read` checkbox and Click on the`Save` button. Follow next steps to get the URL

5 . Add the `Sheet URL` and `Name` of the sheet which you want to integrate. Check the `Read` checkbox and Click on the`Save` button. See **6** below for how to get the URL

![image](https://user-images.githubusercontent.com/32592458/219550682-60dff177-319e-4024-a330-834b350fed7f.png)
<img width="413" alt="Screenshot 2024-02-29 at 1 38 46 PM" src="https://github.com/glific/docs/assets/141305477/2612f184-eb99-4e02-aca9-6b4c1adbec16"/>

6. Open the Google sheet and click on share button on the right hand side to update the sheet permission to at least `Anyone with the link` can `View`

Expand All @@ -40,11 +38,9 @@ ___

7. Paste the copied URL in the Google Sheet Integration screen in Glific and click on `SAVE` button

![image](https://user-images.githubusercontent.com/32592458/219550739-65492d06-4c38-4d31-95e7-cec5f6b5004f.png)

8. You can click on the link button to open the added sheet

![image](https://user-images.githubusercontent.com/32592458/219550770-2842aca1-6ee7-4c5d-affa-2e1fd3fdacc7.png)
<img width="1298" alt="Screenshot 2024-02-29 at 1 42 44 PM" src="https://github.com/glific/docs/assets/141305477/1a1d5fcf-5d18-4ffe-bfa8-22f0ffabc5d3" />

- `It is important to note that the first cell in the Sheet should be named as 'Key' for the Read function to work.`
___
Expand All @@ -53,23 +49,23 @@ ___

9 . Create a new flow and open it for editing

![image](https://user-images.githubusercontent.com/32592458/219550788-7e8aa739-174e-44eb-845a-95f096e3fc3e.png)

10. Use `link Google sheet` node

![image](https://user-images.githubusercontent.com/32592458/219550800-b41f6599-467c-4033-be8c-e5b3c62918d6.png)

![image](https://user-images.githubusercontent.com/32592458/219550813-c43ee789-af23-48fd-8d4f-cbd59cc90f52.png)

1. Select `Link google Sheet`

2. In the second drop-down select the sheet

3. In **Select row** add `@calendar.current_date` or any variable that uniquely defines the `Key` column of Google sheet
3. In `Select row` add any variable that uniquely defines the `Key` column of the linked Google sheet

<img width="505" alt="Screenshot 2024-02-29 at 1 47 48 PM" src="https://github.com/glific/docs/assets/141305477/f15cce2a-7882-4f83-901e-48b7d7bba09d" />

_As per above example, the sheet `Daily Acitivity` is used to read the content from, and the variable `@calendar.current_date` being passed from Glific to the Google sheet is being used as the search key to identify the relevant row to send the content from_

4. Click on `OK`

Click on `OK` and use the column name like below and access the value of cell values.
5. Use column header like below and access the relevant column of the identified row.

`@results.sheet.message_1`
`@results.sheet.col_nameA`

![image](https://user-images.githubusercontent.com/32592458/219550825-82831f46-a239-4600-b95e-bf0533f0565b.png)
___
Expand All @@ -82,7 +78,8 @@ Let us dive in a bit deeper by looking at the steps involved :
1. Create the template messages that you'd like to send via Google Sheets using the normal method. Refer [Creating Template Messages](https://glific.github.io/docs/docs/Product%20Features/Templates/#hsm-template-creation--approval-submission)

2. Once the template is created, make note of the UUID of the template messages you need to share using Google Sheets. Refer the screenshot below :
<img width="1210" alt="Screenshot 2023-09-15 at 8 54 26 AM" src="https://user-images.githubusercontent.com/132430123/268163270-3279fafa-a9a3-4b11-8f64-2035c8aa6a2f.png"/>

<img width="1280" alt="Screenshot 2024-02-29 at 1 58 09 PM" src="https://github.com/glific/docs/assets/141305477/502a5e35-86dc-4770-819e-9c6d3292c526"/>

3. Create a Google Sheet with two headers, `Key` and `template_uuid` as shown below. Usually the `key` column will be having dates on which the individual templates need to be sent.
<img width="730" alt="Screenshot 2023-09-15 at 1 25 33 PM" src="https://user-images.githubusercontent.com/132430123/268214931-e64e1019-ee86-49cc-8ec0-10d1d816d56d.png"/>
Expand Down Expand Up @@ -112,10 +109,12 @@ Let's dive in a bit deeper to see how it works.

2. Add the above created Google Sheet on the Glific. Please find the steps to do that [here](https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Link%20Google%20Sheets/#add-readable-google-sheet)

3. Now create a sample `Interactive Message` with a list message (can do similarly for button options too). Only the first option needs to be entered as shown below with some sample data, as it will be rewrited by the values on the sheet- hence the rest of the options could be left empty. The idea is to fetch values for the options list dynamically from the sheet.
<img width="1256" alt="Screenshot 2023-09-19 at 11 04 36 AM" src="https://user-images.githubusercontent.com/132430123/268855634-507b0aba-9d10-47e7-8e3f-b82b297a4283.png"/>
3. Now create a sample `Interactive Message` with a list message (can do similarly for button options too).
- Please note the first option needs to be entered as shown below with some sample data. This is to ensure the interactive message is created and saved. The list or options will be rewritten by the values on the sheet, hence the rest of the options could be left empty.

<img width="1294" alt="Screenshot 2024-02-29 at 2 08 50 PM" src="https://github.com/glific/docs/assets/141305477/e5c8b2b4-c33f-4360-9f6d-ff14a76c12f3"/>

3. Now since we have the Google Sheets linked & the interactive message created, let's create a sapmple flow to understand how it works :
3. Now since we have the Google Sheets linked & the interactive message created, let's create a sample flow to understand how it works :
<img width="738" alt="Screenshot 2023-09-19 at 11 51 38 AM" src="https://user-images.githubusercontent.com/132430123/268859289-c3af33c5-8bc2-4eb0-96ff-d2d8aa4cba01.png"/>

4. As you can see, the flow starts with a Link Google Sheets node, where the readable google sheets from which the options to be fetched inside the interactive message is added. This is how the Google Sheets node is configured :
Expand Down Expand Up @@ -153,29 +152,27 @@ As you can see on the preview above, the list of options we had given in the Goo

3. Select your project name as the service account and choose JSON as the key format. Download the generated JSON file containing the credentials.

4. Go to your Glific account, navigate to Settings, and select Google Sheet.
4. Go to your Glific account, click on `NGO main account`, click `Settings` and find the menu for `Google Sheet`.

<img width="1200" alt="Screenshot 2023-05-19 at 12 03 31 AM" src="https://github.com/glific/docs/assets/40158831/968e946a-c8f8-4c8a-b2fe-a7f0fa2b8e4b"></img>
<img width="992" alt="Screenshot 2024-02-29 at 2 13 36 PM" src="https://github.com/glific/docs/assets/141305477/c19a50b3-3c7b-4491-bd30-b906403d0ec5"/>

Paste the service account credentials in the provided field, and click on the **Save** button.
<img width="1200" alt="Screenshot 2023-05-19 at 12 10 26 AM" src="https://github.com/glific/docs/assets/40158831/e5db16e9-f3b0-49b2-aa88-e1d79375a6b9"></img>
Paste the service account credentials in the provided field, and click on the `Save` button.


### Link Writable Google Sheet in Glific

5. Go to the Google Sheet screen as mentioned in the above steps.
### Link Writable Google Sheet in Glific

![image](https://user-images.githubusercontent.com/32592458/219550651-2b7ea8e7-cfa5-4353-bbce-bf95858dcf82.png)
5. Go to the `Google Sheet` screen as mentioned in the above steps.

6. Click on the Add Sheet button.
6. Click on the `+Create` button to add a sheet to write to.
<img width="1468" alt="Screenshot 2024-02-29 at 1 35 52 PM" src="https://github.com/glific/docs/assets/141305477/ba552bd6-8bb8-47d4-bf04-974afc74dfd6" />

![image](https://user-images.githubusercontent.com/32592458/219550669-89eb822d-8da1-4201-b3f6-bf8332e41f31.png)

7. Add the Sheet URL and Name of the sheet you want to integrate. Check the `Write` checkbox and click on the Save button. Refer to *Step 8* below for instructions on how to get the URL.
7. Add the Sheet URL and Name of the sheet you want to integrate. Check the `Write` from drop down and click on the Save button. Refer the following steps to ensure the google sheet has right permission before you get the URL.

<img width="1200" alt="Screenshot 2023-05-18 at 11 17 01 PM" src="https://github.com/glific/docs/assets/40158831/12a44f29-410e-479b-abbc-e5cbe879d8b9"></img>
<img width="466" alt="Screenshot 2024-02-29 at 2 19 43 PM" src="https://github.com/glific/docs/assets/141305477/e85d0288-8751-4160-9a2c-11bff43f53fa"/>

8. Open the Google Sheet you want to write data on and click on the share button on the right-hand side. Update the sheet permissions and add the Service Account Identifier (The client email on the service account) as a user invited in the spreadsheet's Collaboration Settings with `Editor` permission.
9. Open the Google Sheet you want to write data on and click on the share button on the right-hand side. Update the sheet permissions and add the Service Account Identifier (The client email on the service account) as a user invited in the spreadsheet's Collaboration Settings with `Editor` permission.

<img width="1200" alt="Screenshot 2023-05-18 at 11 23 49 PM" src="https://github.com/glific/docs/assets/40158831/feb09bd0-1d91-43ac-a289-ac813c2a2d4a"></img>

Expand All @@ -184,11 +181,8 @@ Paste the service account credentials in the provided field, and click on the **
<img width="1200" alt="Screenshot 2023-05-18 at 11 22 26 PM" src="https://github.com/glific/docs/assets/40158831/2518951e-9fb1-4740-9dbb-8a4766c3bf55"></img>

10. Paste the copied URL in the Google Sheet Integration screen in Glific and click on the `SAVE` button.
<img width="1200" alt="Screenshot 2023-05-18 at 11 27 28 PM" src="https://github.com/glific/docs/assets/40158831/111242c8-07e7-4cb8-acfc-b1345a8c4bec"></img>

11. You can click on the link button to open the added sheet.

<img width="1200" alt="Screenshot 2023-05-18 at 11 40 48 PM" src="https://github.com/glific/docs/assets/40158831/703f83bd-f7e6-462c-acee-3af13defab3e"></img>
<img width="461" alt="Screenshot 2024-02-29 at 2 21 32 PM" src="https://github.com/glific/docs/assets/141305477/01491060-e219-4615-ad79-27781e6f85a1"/>

### Configuring Writable Google Sheet in the Flow

Expand All @@ -201,28 +195,25 @@ Paste the service account credentials in the provided field, and click on the **

13. Here's how the imported flow would look like

<img width="1200" alt="Screenshot 2023-05-18 at 11 43 21 PM" src="https://github.com/glific/docs/assets/40158831/80bc24ea-0934-4933-9f9f-9324b67f2975"></img>

14. The first node is the `Send Message` node, which asks the contact for input to be added to the sheet.
<img width="589" alt="Screenshot 2024-02-29 at 2 40 13 PM" src="https://github.com/glific/docs/assets/141305477/2edeafc6-19fa-4241-9224-6dafdde84519" />

<img width="1200" alt="Screenshot 2023-05-18 at 11 45 13 PM" src="https://github.com/glific/docs/assets/40158831/03d7f825-ca8d-4705-b095-b8a30a8175fc"></img>

15. The second node is the `Wait for Response` node with the result name sheet_input. The response from the contact will be saved in this result and can be referenced as @results.sheet_input.
14. The first node is the `Send Message` node, which asks the contact for input to be added to the sheet.

<img width="1200" alt="Screenshot 2023-05-18 at 11 45 36 PM" src="https://github.com/glific/docs/assets/40158831/cb958774-3395-4080-8a18-ab47beac7594"></img>
15. The second node is the `Wait for Response` node with the result name sheet_input. The response from the contact will be saved in this result and can be referenced as `@results.sheet_input`.

16. The third node is the `Link Google sheet` node, used to add the user-entered text into the Google sheet. Click on this node to configure it.

<img width="1200" alt="Screenshot 2023-05-18 at 11 51 07 PM" src="https://github.com/glific/docs/assets/40158831/883b878d-a37a-4352-a73c-b424e7436a7d"></img>

<img width="490" alt="Screenshot 2024-02-29 at 2 34 22 PM" src="https://github.com/glific/docs/assets/141305477/387be98f-0c4f-4ee0-b79f-38b27f8ff3cf"/>

17. Under Action, select **Write** from the dropdown menu.
17. Under Action, select `Write` from the dropdown menu.

![Screenshot6](https://github.com/glific/docs/assets/130072273/9a29141e-8a68-49f1-91d2-ae5a19e895f5)

18. Select the sheet from the dropdown that was added in *Step 7* above i.e. Sample Sheet
18. Select the sheet from the dropdown that was added in step above i.e. Sample Sheet


<img width="1200" alt="Screenshot 2023-05-18 at 11 51 58 PM" src="https://github.com/glific/docs/assets/40158831/8e2ebbca-92ce-410c-b54d-673df200c811"></img>
<img width="488" alt="Screenshot 2024-02-29 at 2 35 02 PM" src="https://github.com/glific/docs/assets/141305477/2ed740f2-e187-482c-9066-e0e5c97576ae"/>

19. Specify the Sheet range from which you would like to enter the data in the Google sheet. For example, Sheet1!A10:D will add data from row 10 of column A in subsheet Sheet1 up to column D. This means that four data values will be added in 20.

Expand All @@ -231,19 +222,20 @@ Paste the service account credentials in the provided field, and click on the **

20. Enter the data to be written in the Google sheet under Input data to update in sheet. You can use values like @results.sheet_input, @contact.name, @contact.fields.age, etc.

<img width="1200" alt="Screenshot 2023-05-18 at 11 54 24 PM" src="https://github.com/glific/docs/assets/40158831/979f7029-320d-45e1-a081-c33fcff1d68d"></img>

21. After configuring the flow, click on the Preview button located on the bottom right side of the screen to run the flow in the simulator.
<img width="1200" alt="Screenshot 2023-05-18 at 11 59 10 PM" src="https://github.com/glific/docs/assets/40158831/46fa4b4c-208e-468f-8529-d731bc342f98"></img>
<img width="496" alt="Screenshot 2024-02-29 at 2 35 43 PM" src="https://github.com/glific/docs/assets/141305477/f1d9505e-6a3f-40ea-ae58-789b3eabefaf" />

21. After configuring the flow, click on the `Preview` button located on the top right side of the screen to run the flow in the simulator.

23. In the simulator, you will see the first message from the `Send Message` node, which prompts you to enter text.

22. In the simulator, you will see the first message from the `Send Message` node, which prompts you to enter text.
24. Type the desired text that you want to see in the sheet, and then press Enter.

23. Type the desired text that you want to see in the sheet, and then press Enter.
<img width="1200" alt="Screenshot 2023-05-18 at 11 56 48 PM" src="https://github.com/glific/docs/assets/40158831/f8c3f0f7-ea42-4906-802f-9c2c4811568d"></img>
<img width="845" alt="Screenshot 2024-02-29 at 2 36 46 PM" src="https://github.com/glific/docs/assets/141305477/c6d482ce-1419-4dc6-bbcd-2ecdf846dc6b" />

24. This will move the flow forward, and the data will be written to the Google Sheet.
25. This will move the flow forward, and the data will be written to the Google Sheet.

25. Open the Google Sheet to check the newly inserted data.
26. Open the Google Sheet to check the newly inserted data.
<img width="1200" alt="Screenshot 2023-05-18 at 11 58 31 PM" src="https://github.com/glific/docs/assets/40158831/bfa12d80-9038-4c2a-919a-ce425bd2ffee"></img>
___

Expand Down

0 comments on commit e89b140

Please sign in to comment.