Update 01. Getting Started with Glific.md

updated text and images

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