feat: add docs for Dyte, Google Translate and Macros [CWM-27, CWM-26,…

… CWM-25] (#395)

* feat: add google translate

Co-authored-by: Hricha-Shandily <hricha@chatwoot.com>

* feat: add dyte docs

Co-authored-by: Hricha-Shandily <hricha@chatwoot.com>

* feat: add macros docs

Co-authored-by: Hricha-Shandily <hricha@chatwoot.com>

* feat: add image name

* feat: add product

---------

Co-authored-by: Hricha-Shandily <hricha@chatwoot.com>

config/sidebar/product.js

@@ -56,7 +56,7 @@ module.exports = [
         "Whatsapp Channel": [
           "product/channels/whatsapp/whatsapp-cloud",
           "product/channels/whatsapp/twilio",
-          "product/channels/whatsapp/360dialog"
+          "product/channels/whatsapp/360dialog",
         ],
       },
       {
@@ -78,9 +78,7 @@ module.exports = [
               "product/channels/email/gmail/generate-app-password",
               "product/channels/email/gmail/add-forward-email",
             ],
-            Microsoft: [
-              "product/channels/email/microsoft/create-channel",
-            ],
+            Microsoft: ["product/channels/email/microsoft/create-channel"],
           },
         ],
       },
@@ -123,12 +121,13 @@ module.exports = [
           "user-guide/features/reports/agent",
           "user-guide/features/reports/label",
           "user-guide/features/reports/inbox",
-          "user-guide/features/reports/team"
+          "user-guide/features/reports/team",
         ],
       },
       "user-guide/conversation-workflow",
       "product/others/advanced-conversation-filters",
       "user-guide/features/automations",
+      "product/features/macros",
       "user-guide/features/pre-chat-form",
       {
         type: "category",
@@ -143,6 +142,8 @@ module.exports = [
         label: "Integrations",
         items: [
           "product/channels/live-chat/integrations/dialogflow",
+          "product/features/dyte",
+          "product/features/google-translate",
           "product/features/slack",
         ],
       },
@@ -179,6 +180,6 @@ module.exports = [
     collapsible: false,
     label: "Others",
     type: "category",
-    items: ["product/others/enterprise-edition","product/others/faq"],
+    items: ["product/others/enterprise-edition", "product/others/faq"],
   },
 ];

docs/product.md

@@ -41,6 +41,13 @@ In this user guide, we’ve explained the features, capabilities, modes of opera
 - [Pre Chat Form](/docs/user-guide/features/pre-chat-form)
 - [Template Variables](/docs/user-guide/features/template-variables)
 
+### Integration
+
+- [DialogFlow](/docs/product/channels/live-chat/integrations/dialogflow)
+- [Dyte](/docs/product/features/dyte)
+- [Google Translate](/docs/product/features/google-translate)
+- [Slack](/docs/product/features/slack)
+
 ### Advanced
 
 - [Agent Bots](/docs/product/others/agent-bots)
@@ -79,7 +86,6 @@ To see the supported mobile OS versions for the mobile app, see the table below.
 | Android | Android 5.0     |
 | iOS     | iOS 11.0        |
 
-
 ### Next Steps
 
 We recommend that:

docs/product/features/dyte.md

@@ -0,0 +1,52 @@
+---
+sidebar_label: "Dyte"
+title: "How to enable video calls with Dyte integration?"
+---
+
+Video calling your customers is a great way to connect with them quickly, understand their problems effectively, provide faster resolutions, and gain valuable business insights. You can video call your customers through [website live chat](https://app.chatwoot.com/hc/chatwoot-user-guide-cloud-version/en/website-live-chat/474) in Chatwoot. To utilize this feature, you will need to enable the Dyte integration. This guide explains how.
+
+P.S. If you don't have a Dyte account, you'll need to [create](https://dev.dyte.io/signup) one first.
+
+## How to set up the Dyte integration in Chatwoot?
+
+**Step 1.** Go to Settings → Applications → Dyte. Click the corresponding "Configure" button.
+
+![Dyte Integration in Chatwoot](./images/integrations/dyte/dyte-integration-in-chatwoot.png)
+
+**Step 2.** You'll see the Dyte app page. Click the "Connect" button.
+
+![Connect Dyte App to Chatwoot](./images/integrations/dyte/connect-dyte-app-to-chatwoot.png)
+
+**Step 3.** Enter your Organization ID and API Key from Dyte.
+
+![Dyte Setup](./images/integrations/dyte/dyte-setup.png)
+
+**How to find your Dyte configuration values?**
+
+To find these values, visit the "API Keys" section on your Dyte developer portal.
+
+![Dyte Developer Portal](./images/integrations/dyte/dyte-developer-portal.png)
+
+In Chatwoot, once you have entered the values, click the "Create" button.
+
+Now, your Dyte integration is complete.
+
+## How to video call your customers in Chatwoot?
+
+Once the Dyte integration is enabled, you'll be able to see the video calling option on the website inbox chat window. To invite your customer for a video call, follow the steps described below.
+
+**Step 1.** Click the video camera icon beneath the text editor.
+
+![Video Calling Option in Chat Window](./images/integrations/dyte/video-calling-option-in-chat-window.png)
+
+**Step 2.** Chatwoot will send a message with an invitation to your customer to join the video call. Click the button "Click here to join" to join the room.
+
+![Click to Join Video Chat](./images/integrations/dyte/click-to-join-video-chat.png)
+
+**Step 3.** Now you will be connected to your customer.
+
+![Video Call Interface for Agents](./images/integrations/dyte/video-call-interface-for-agents.png)
+
+The video calling interface gives plenty of options to make your and the customer's experience more enriching. Some of these options are shown in the screenshot below:
+
+![Video Call Interface for Customers](./images/integrations/dyte/video-call-interface-for-customers.png)

docs/product/features/google-translate.md

@@ -0,0 +1,46 @@
+---
+sidebar_label: "Google Translate"
+title: "How to translate messages with Google Translate?"
+---
+
+If you frequently receive queries in languages you/your team members don't understand, you can utilize the Google Translate integration in Chatwoot. When enabled, you can instantly translate incoming messages using the right-click menu. This way, you can easily communicate with customers in their native language, even if you don't speak it yourself.
+
+## How to enable Google Translate?
+
+**Step 1.** Go to Settings → Applications → Google Translate. Click the corresponding "Configure" button.
+
+![Google Translate integration in Chatwoot](./images/integrations/google-translate/google-translate-integration-in-chatwoot.png)
+
+**Step 2.** You'll see the Google Translate app page. Click the "Connect" button.
+
+![Connect Google Translate](./images/integrations/google-translate/connect-google-translate.png)
+
+**Step 3.** Enter your Google Cloud Project ID and Project Key File. If you need help obtaining these values, refer to this [doc](https://cloud.google.com/translate/docs/setup) from Google.
+
+![Google Translate setup](./images/integrations/google-translate/google-translate-setup.png)
+
+Once you have entered the values, click the "Create" button.
+
+Now, your Google Translate integration is complete.
+
+### How to change the translation language?
+
+Your messages get translated into your site language. To select your site language, visit the "Account Settings" page.
+
+**Step 1.** Go to Settings → Account Settings → Site Language. Open the dropdown and select your preferred language.
+
+![Site language setting in Chatwoot](./images/integrations/google-translate/site-language-setting-in-chatwoot.png)
+
+**Step 2.** Click the "Update Settings" button on the top-right corner of the page. This will translate your entire dashboard to the selected language.
+
+**Note:** Agents can select their individual preferred languages too.
+
+## How to translate incoming messages?
+
+Whenever you receive a message in a language you need help with, click the 3 dots beside the message to open the menu and select "Translate".
+
+![Translating a message in Chatwoot](./images/integrations/google-translate/translating-a-message-in-chatwoot.png)
+
+Find the translated content in the popup window.
+
+![Translated message in Chatwoot](./images/integrations/google-translate/translated-message-in-chatwoot.png)

docs/product/features/macros.md

@@ -0,0 +1,64 @@
+---
+sidebar_label: "Macros"
+title: "How to use Macros?"
+---
+
+A macro is a set of sequential saved actions, like labeling a conversation, sending an email transcript, sending an attachment, etc., which you can define from your dashboard.
+
+As a support agent, you will find that you need to repeat the same set of actions often. Here is an example: Whenever you receive a demo request, you assign the Sales team, send a standard message on how to book a slot, add the *Sales* label, and snooze the conversation. Or, whenever you receive spam, you send the same message about how they've come to the wrong place, assign the *Spam* label, and close the conversation.
+
+Doing all these actions one-by-one, and multiple times a day can be painful and time-consuming. Instead, you can run a macro.
+
+This guide explains, with examples, how to create macros––personal or public––and how to use them.
+
+## How to create a macro?
+
+**Step 1.** Go to Settings → Macros → "Add a new macro".
+
+![Macros in Chatwoot](./images/integrations/macros/macros-in-chatwoot.png)
+
+**Step 2.** You'll see a macro setup screen. Here, you can create a flow of the actions that must be performed when this macro is executed. You can also name your macro for internal reference in the right sidebar.
+
+![Setting Up A Macro](./images/integrations/macros/setting-up-a-macro.png)
+
+You can start by selecting an action from the dropdown. The currently available actions are shown below.
+
+![Macros actions in Chatwoot](./images/integrations/macros/macros-actions-in-chatwoot.png)
+
+Select an action and set it up accordingly. When done, continue adding more actions.
+
+### An example setup of a macro
+
+Here is an example of the sequential actions performed whenever the Paper Layer team receives a query from a customer on free plan.
+
+![Macros example Setup in Chatwoot](./images/integrations/macros/macros-example-setup-in-chatwoot.png)
+
+**Please note that the order you set these actions defines the order in which they will be performed.**
+
+**Step 3.** Set the visibility for your macro. If you are creating it for your personal use, set "Private". If you want your team to be able to use it, set the visibility to "Public."
+
+![Macro visibility](./images/integrations/macros/macro-visibility.png)
+
+**Step 4.** Click the "Save macro" button on the bottom-right of the setup page.
+
+Your macro is now ready to use!
+
+## How to execute a macro?
+
+**Step 1.** Locate the "Macros" section in the right sidebar of your chat window. Click the plus sign to expand it. This will show you the list of the macros created for your account – both private to you and public.
+
+![Create a macro - Step 1](./images/integrations/macros/create-macro-step-1.png)
+
+**Step 2.** Preview the macro if you are unsure of the actions it would perform. To preview, click the "i" icon. It would pop up a preview of the actions set in the specific macro.
+
+![Create a macro - Step 2](./images/integrations/macros/create-macro-step-2.png)
+
+**Step 3.** Execute the macro by clicking the play button. This would automatically perform all the actions in the defined sequence in a split second. You'll be able to see the respective success messages for different actions. Here's an example:
+
+![Create a macro - Step 3](./images/integrations/macros/create-macro-step-3.png)
+
+## How to edit or delete a macro?
+
+To edit or delete macros, open the list of macros by visiting Settings -> Macros. Find the specific macro and use the corresponding edit or delete button, as shown in the screenshot below.
+
+![Edit or delete a Macro](./images/integrations/macros/edit-or-delete-macro.png)