Merge branch 'main' into updatewithnewui-speedsends

docs/3. Product Features/06. Templates.md

@@ -1,4 +1,4 @@
-> ### **6 minutes read                             &nbsp     &nbsp     &nbsp     &nbsp     &nbsp     &nbsp     &nbsp     &nbsp     &nbsp     &nbsp     &nbsp         &nbsp     &nbsp     &nbsp &nbsp   `Beginner`**
+> ### **6 minutes read                                                                                                               `Beginner`**
 
 **HSM (Highly Structured Message) templates are pre-approved messages by Whatsapp which are used to send to the users when their session window is closed (i.e after 24hours of inactive conversation). These templates ensure compliance with WhatsApp's guidelines and allow NGO's to send notifications, customer support messages and alerts with placeholders for personalized information.**
 ___
@@ -10,23 +10,25 @@ ___
 
 
 <iframe width="800" height="500" src="https://www.youtube.com/embed/K_d3kYzg_Ec" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<br />
+**Please note- **This video is recorded with old UI
 
 
 ## HSM Template Creation & Approval Submission
 
-1. Login to Glific and click on the `Templates` option from left panel
+1. Login to Glific and click on the `Quick tools-->Templates` option from left panel
 
-![image](https://user-images.githubusercontent.com/32592458/212644749-e6b08f36-8ea8-4048-afc3-a9e8a57cf939.png)
+<img width="213" alt="image" src="https://github.com/glific/docs/assets/122982753/5038931a-5b99-4642-addb-3fb9c452c4fb"/>
 <br />
-2. Click on `+ CREATE HSM TEMPLATE` button from the top right corner of Templates page.
+2. Click on `+ CREATE` button from the top right corner of Templates page.
 
-![image](https://user-images.githubusercontent.com/32592458/212644822-f9cb177b-11ec-4be5-b22c-c1ba94e530fa.png)
+<img width="1275" alt="Screenshot 2024-03-06 at 2 47 56 PM" src="https://github.com/glific/docs/assets/122982753/41ae94bf-8bea-4473-ac9b-f6f8638ca94a"/>
 <br />
 <br />
 
 3. `Add A New HSM Template` page opens up.
 
-![image](https://i.postimg.cc/wTzqHhvr/Screenshot-2023-05-25-at-3-52-46-AM.png)
+<img width="1290" alt="image" src="https://github.com/glific/docs/assets/122982753/91f1e60a-1075-4f6c-b863-177f55901549"/>
 <br />
 <br />
 
@@ -47,11 +49,11 @@ ___
 
 You can use `Add Buttons` checkbox to use buttons in HSM templates.
 
-![image](https://user-images.githubusercontent.com/32592458/212646089-81fc91ec-50e3-4751-bfa3-473bc7ba305b.png)
+<img width="467" alt="image" src="https://github.com/glific/docs/assets/122982753/2fa202d1-5d6c-4f3c-b3dc-bbf2231bba95"/>
 <br />
 **Note:-** Phone numbers without country code (for example Exotel numbers) will be added in HSM as an `Call to actions` option. As a workaround, you can add these numbers in the body of the message.
 
-![image](https://user-images.githubusercontent.com/32592458/212646126-0f133851-796a-44c8-99a6-1acb65dab858.png)
+<img width="518" alt="image" src="https://github.com/glific/docs/assets/122982753/ef4b3792-4d95-4c71-bb75-418e90653806"/>
 
 ![image](https://user-images.githubusercontent.com/32592458/212646161-fd0cf852-8e80-4b93-94d0-6d8f2eba5fd2.png)
 <br />
@@ -60,12 +62,7 @@ You can use `Add Buttons` checkbox to use buttons in HSM templates.
 
 Add a variable like {{1}} at the end of the URL and add it to the **Call to Action** option
 
-<img width="568" alt="image4" src="https://github.com/glific/docs/assets/132430123/4da9b531-235c-4475-962a-288adcb92d38"/>
-<br />
-
-The template sample will look like this :
-
-<img width="600" alt="image5" src="https://github.com/glific/docs/assets/132430123/fe2d7325-6837-45fe-84cb-a3dd998d9e37" />
+<img width="484" alt="image" src="https://github.com/glific/docs/assets/122982753/6f730ad0-0e98-41b0-a4be-36d9d5d3ea9b"/>
 
 <br />
 
@@ -81,25 +78,26 @@ The attachment URL is the sample URL, the exact attachment URL could be added wh
 <br />
 Notice a simulator available in the form, as you will fill in the details of the HSM template, it will start previewing the message. Simulator helps you to get an idea about how the message will look like when the contact receives it.
 
-![image](https://user-images.githubusercontent.com/32592458/212645895-1db59ed5-67ae-4c23-a44f-b1407d20a017.png)
+<img width="365" alt="image" src="https://github.com/glific/docs/assets/122982753/b9aee8df-29bd-41cf-bdcb-1742ffabd6c7"/>
 <br />
 1.  As discussed above, click on `SUBMIT FOR APPROVAL` button to send the HSM template for approval.
 
-![image](https://user-images.githubusercontent.com/32592458/212645922-d0314314-797d-4e4c-8eb4-dfde69730d76.png)
+<img width="468" alt="Screenshot 2024-03-06 at 2 57 02 PM" src="https://github.com/glific/docs/assets/122982753/a2c7928f-0b97-4231-bb25-48afa8a50796"/>
 <br />
 
 2.  Generally it takes a maximum of 48 hours to get approval from WhatsApp. Once you get your message approved, you can start sending it to your contacts. Verify that the `Status` of your message has turned **Approved** from the `Templates` page
 
-![image](https://user-images.githubusercontent.com/32592458/212645959-61f85d9c-d6f6-498d-8f4c-f5156b47bdb8.png)
+<img width="1243" alt="image" src="https://github.com/glific/docs/assets/122982753/e14e89c0-b8fe-439d-9a84-03679790d858"/>
 <br />
+
 ___
 ## How to use HSM Templates in your flows
 
 Common messages used in flow are session messages, which are open to send only within the 24 hours of users sending a message. If beneficiary responds within 24 hours, the session remains active. After 24 hours NGO users cannot send messages on chat bot to the beneficiary, until they send some message from their WhatsApp.
 
 Remaining hours of session messages expiry can be checked from contact list under search section in left pane.
 
-![image](https://user-images.githubusercontent.com/32592458/218255866-135a2731-c599-4a37-bd92-1b469221ddcc.png)
+<img width="346" alt="image" src="https://github.com/glific/docs/assets/122982753/7d324148-21c7-4619-a40b-b166556bd2db"/>
 
 WhatsApp provides HSM templates which can be sent after the 24 hours. These templates needs to be approved from WhatsApp before they can be used in the conversation. Please refer [HSM Templates](https://glific.github.io/docs/docs/Product%20Features/HSM%20Templates/) to know more how to create HSM templates in Glific.
 
@@ -128,9 +126,9 @@ You can use approved HSM templates in your flow, to send to multiple users autom
 ___
 ## Sending HSM Template to Contacts
 
-Go to `Chat` window and from the message box click on the `Templates` tab. You will see the message in the list of approved template messages. Select the message and send it to your contact.
+Go to `Chat` window and to the particular contact to whom you want to send message. Click on upward arrow in the message box and click on the `Templates` tab there. You will see the message in the list of approved template messages. Select the message and send it to your contact.
 
-![image](https://user-images.githubusercontent.com/32592458/212645992-684ba1f5-b9ac-4c98-b9cf-8595ba8e245a.png)
+<img width="931" alt="image" src="https://github.com/glific/docs/assets/122982753/7e946b65-3fde-4635-bfa1-1ca9df1f22f6"/>
 <br />
 
 ___
@@ -146,11 +144,11 @@ Glific has added a support to apply for multiple templates with the same title.
 
 **English**
 
-![image](https://user-images.githubusercontent.com/32592458/212646029-1cc63558-4fbe-49c4-aa7e-f1fcef154090.png)
+<img width="519" alt="image" src="https://github.com/glific/docs/assets/122982753/9dd09ff5-61f4-46d9-a43f-fe5c04ac0711"/>
 
 **Hindi**
 
-![image](https://user-images.githubusercontent.com/32592458/212646065-c7f47dee-25dd-4a24-b4d0-011ad99bd6aa.png)
+<img width="499" alt="image" src="https://github.com/glific/docs/assets/122982753/1caa0cca-ad18-439a-9204-59658600e5b5"/>
 
 ___
 ## Bulk Apply HSM Templates
@@ -194,7 +192,7 @@ Multiple templates can also be applied by using Bulk Apply HSM templates using G
 
 5. Go to `Templates` screen, click on `BULK APPLY` and choose the downloaded csv file.
 
-![image](https://user-images.githubusercontent.com/40158831/218454098-1336c563-ce5b-4058-9e62-5657b95e250c.jpeg)
+<img width="1278" alt="Screenshot 2024-03-06 at 3 08 02 PM" src="https://github.com/glific/docs/assets/122982753/4511bd3a-806a-4b5c-8e5b-e68719fe86f2"/>
 <br />
 
 6. Templates will be applied and will create a new CSV file with the status of each template.
@@ -205,6 +203,7 @@ ___
 ## HSM templates limit
 
 By default, there is a **limit of 250 HSM templates per phone number**. If incase more HSM templates are required, then you need to submit a request to WhatsApp to increase the limit.
+<br />
 ___
 ## Suggestions to get the HSM template approved
 
@@ -215,14 +214,17 @@ ___
 1. **_Use absolute URL_** in HSM text. Short URLs don&#39;t work and the template got rejected with an error message &quot;Invalid format&quot;
 1. **Emojis are not allowed** in HSM buttons. If you add emojis the template will be rejected.
 1. **GIFs are not allowed** in HSM attachments. If you add Gifs as an attachment, it will be rejected.
-___
-## Import the HSM visible in Gupshup, but not in Glific
+<br />
+
+
+## Sync the HSM messages from Gupshup- 
+
+1. Sometimes it takes time to sync from Gupshup to Glific. To sync it instantly sync, click on `Sync HSM` at the top of the page, 
+
+<img width="1290" alt="image" src="https://github.com/glific/docs/assets/122982753/5c3459a8-8f59-443d-a0f7-94c08d562c34"/>
+<br />
 
-1. Click on the `templates` link from the left navigation.
-1. At the bottom of the page, click on `Get HSM Updates`
 
-![image](https://user-images.githubusercontent.com/32592458/212646203-1a4bcb05-8486-46df-92cf-d2ec512dd677.png)
-___
 ## How to check the reason for HSM rejection.
 
 1 . Log in to Gupshup ([https://www.gupshup.io/](https://www.gupshup.io/)).

docs/3. Product Features/10. Others/01. Getting Started with Glific.md

@@ -1,100 +1,109 @@
-> ### **2 minutes read                             &nbsp                             &nbsp                             &nbsp                               `Beginner`**
+> ### **2 minutes read                                                                                                               `Beginner`**
 
 **You can start communicating with your contacts/ beneficiaries after your Glific account setup is complete.**
 
 ## Video Tutorial: Getting started with Automated Chat Flows
 
 <figure class="video_container">
   <iframe src="https://www.youtube.com/embed/KUmiAUOLI2M?showinfo=0" frameborder="0" allowfullscreen="true" width="800" height="500"> </iframe>
+   <br/>
+**Please note- This video is recorded with old UI**
+   <br/>
 </figure>
 
 ## Create a Flow
 
 1. Login to Glific with your credentials.
 
-![image](https://user-images.githubusercontent.com/32592458/212239273-d1a392a0-3f06-4c76-92a6-acab35cfd3d3.png)
+<img width="501" alt="image" src="https://github.com/glific/docs/assets/122982753/571990be-c646-4f1e-94f1-0367dc1ae541"/>
 
 <br />
 
-2.  Click on `Flows` menu from the left panel and then click on `+ CREATE FLOW` button from top right corner
+2.  Click on `Flows-->flows` menu from the left panel and then click on `+ CREATE FLOW` button from top right corner
 
-![image](https://user-images.githubusercontent.com/32592458/212239285-fed09f8b-75b3-42c2-9f0d-35ffcb7d5a73.png)
+<img width="208" alt="image" src="https://github.com/glific/docs/assets/122982753/5ea7269b-f91f-4314-81da-5009856bbd36"/>
+<br />
+<br />
+
+<img width="1286" alt="Screenshot 2024-03-06 at 4 19 06 PM" src="https://github.com/glific/docs/assets/122982753/bbede205-3018-4c8f-bbdb-a8c68241ec04"/>
 
 <br />
 
-3.  Enter the `Name` of the flow and the `Keywords` with which you want to trigger/start the flow. Click on `Save` button.
+3.  Enter the `Name` of the flow and the `Keywords` with which you want to trigger/start the flow. It is always good to add Description for the flow (which makes it easy for any teammember to understand about the flow) and Tag (to categorize the flows of same categorize).
+Click on `Save` button.
+
+<img width="579" alt="image" src="https://github.com/glific/docs/assets/122982753/27287a4a-927d-4fb7-9d1b-ae0c16fdd199"/>
 
-![image](https://user-images.githubusercontent.com/32592458/212239300-ee647a1b-9ecc-4c79-83d8-c2a44a7cfa8d.png)
 
 ## Configure the Flow
 
 1. You will see your first flow created on the `Flows` tab. Click on the `Configure` icon to start adding messages in the flow.
 
-![image](https://user-images.githubusercontent.com/32592458/212239323-2900047f-8718-42ad-8009-af3440d24096.png)
+<img width="1262" alt="Screenshot 2024-03-06 at 4 22 38 PM" src="https://github.com/glific/docs/assets/122982753/5c017b33-3ed9-43f1-96db-470637ef01f7"/>
 
 <br />
 
 2. Once the Flow Editor opens up, click on `Create Message` to create your first message in the flow.
 
-![image](https://user-images.githubusercontent.com/32592458/212239338-48056d51-2fcb-4e68-8e35-8007f6e52d04.png)
+<img width="1275" alt="image" src="https://github.com/glific/docs/assets/122982753/db5fc88d-3cc8-4b37-b61b-ad3982b56bb2"/>
 
 <br />
 
 3.  The `Send Message` node will open up. Type your introductory message in the input box. Click on `Ok` button to save it.
 
-![image](https://user-images.githubusercontent.com/32592458/212239345-6a551456-a821-4245-94f6-8eeec88e9558.png)
+<img width="618" alt="image" src="https://github.com/glific/docs/assets/122982753/c6bfa582-2ad5-47e2-9442-5cdc07b62f79"/>
 
 <br />
 
 4.  You will now see a node created in your Flow Editor.
 
-![image](https://user-images.githubusercontent.com/32592458/212239372-43e623b2-967b-4323-8833-b3b853c889f3.png)
+<img width="334" alt="image" src="https://github.com/glific/docs/assets/122982753/366b819a-aaf0-4ae2-be42-467dd34b5fa1"/>
 
 <br />
 
 5.  Click on the **red dot** at the bottom of the node and drag it to create the next node.
 
-![image](https://user-images.githubusercontent.com/32592458/212239389-71665089-29a3-42c5-b67d-c0d7af7f9d91.png)
+<img width="379" alt="image" src="https://github.com/glific/docs/assets/122982753/f30cc898-e287-4858-bbf8-34cf8886d3f4"/>
 
 <br />
 
 6.  You can receive the response back from your contact at this stage and show it back to the contact in a flow.
 
-![image](https://user-images.githubusercontent.com/32592458/212239405-d08e4288-3ce0-40dd-92c9-8a7d9b58c5d6.png)
+<img width="580" alt="image" src="https://github.com/glific/docs/assets/122982753/8305b838-c43e-4150-bf52-c079cd23630a"/>
 
 <br />
 
 7. There are many message types that are available for you to build up your communication flow with your contacts.
 
 ## Test the flow
 
-12. To test your communication flow, click on `Preview` button from Glific flow edit.
+12. To test your communication flow, click on `Preview` button on the top right of the flow editor screen.
 
-![image](https://user-images.githubusercontent.com/32592458/212239427-b6615ff4-6b0d-4d26-b08a-f9ac4e2c1be1.png)
+<img width="1288" alt="Screenshot 2024-03-06 at 4 29 52 PM" src="https://github.com/glific/docs/assets/122982753/9275a5a3-f7f8-400b-ac75-af00a55b053d"/>
 
 13.  It will open up a simulator for you to start communicating through the flow.
 
-![image](https://user-images.githubusercontent.com/32592458/212239452-9a5e10c1-38a7-4d82-8a3c-ba3be72e842a.png)
-
 14.  Reply from the simulator message input box and you will see the
 
 the response back from your flow.
 
-15 .  `Publish` the flow to start using it with your contacts, after your test is successful.
+<img width="952" alt="image" src="https://github.com/glific/docs/assets/122982753/782899d4-57c4-4848-bdd1-082725fec98a"/>
+
+15 .  Click on `Publish` button on the top right, to start using it with your contacts, after your test is successful.
+
+<img width="1294" alt="image" src="https://github.com/glific/docs/assets/122982753/e1470bcc-bb63-4f84-af69-49ebcc305c79"/>
 
-![image](https://user-images.githubusercontent.com/32592458/212239468-6399b1d5-d29b-41d7-945e-4c849a9f8709.png)
 
 - **Publish &amp; Stay** - Will publish the flow and keep the flow open in Flow editor.
 - **Publish &amp; GO Back** - will Publish the flow and take you to the flows listing page.
 - **Cancel** - Will not publish the flow and keep the flow open for editing
 
-![image](https://user-images.githubusercontent.com/32592458/212239482-ade344ee-0fbb-4514-bb6b-d863095876d0.png)
+<img width="453" alt="image" src="https://github.com/glific/docs/assets/122982753/5c6b9a54-b985-4251-8570-af3e4565bd13"/>
 
 
+16 . Note- It will show the `Last published` and `Last saved in draft` date and time of the flow in the flow listing page. Make sure to publish the flow after edits to get the desired results from the flow.
 
-16 . Note it will show the `Last published` and `Last saved in draft` date and time of the flow. Make sure to publish the flow after edits to get the desired results from the flow.
-
-![image](https://user-images.githubusercontent.com/32592458/212239500-b1443ec5-a925-4b95-bedc-36195b0f4ab3.png)
+<img width="1282" alt="image" src="https://github.com/glific/docs/assets/122982753/9d04f3cb-a41e-4027-bcd9-573cc2223a7f"/>
 
 ## Change Admin in Facebook Business Account 
 
@@ -115,14 +124,21 @@ Refer the Facebook support article below for more details : [Change someone&#39;
 - `Save` and `Publish` the Flows
 <figure class="video_container">
   <iframe src="https://www.youtube.com/embed/atAgP3HCo0Q?showinfo=0" frameborder="0" allowfullscreen="true" width="800" height="500"> </iframe>
+     <br/>
+**Please note- This video is recorded with old UI**
+   <br/>
 </figure>
 
+<br/>
+<br/>
 
-
-- Revert Changes in Flows
+- 'Revert Changes' in Flows
 
 <figure class="video_container">
   <iframe src="https://www.youtube.com/embed/Ef-Lc-18ics?showinfo=0" frameborder="0" allowfullscreen="true" width="800" height="500"> </iframe>
+     <br/>
+**Please note- This video is recorded with old UI**
+   <br/>
 </figure>
 
 ## Tags