Merge pull request #832 from openchatai/omar/zapier-integration

Omar/zapier integration

docs/dashboard/zapier_integration.mdx

@@ -0,0 +1,158 @@
+---
+title: "Zapier"
+icon: "asterisk"
+description: "Open is integrated with Zapier! You can automate multiple Open actions and triggers using zapier.com and using OpenCX app."
+---
+
+This guide shows you how to create your own zaps using Open's Action and Triggers.
+
+A Zapier zap consists of a Trigger and an Action.
+
+Zapier Triggers allows you to do an action when something happens.
+
+Zapier Action is an action that happens when a trigger is activated.
+
+## Open Actions
+<CardGroup cols={2}>
+    <Card
+        title="Create a contact"
+        icon="user-plus"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Create a new contact to be stored in your Open Dashboard.
+    </Card>
+       <Card
+        title="Delete a contact"
+        icon="user-minus"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Deletes a contact from your contact list.
+    </Card>
+     <Card
+        title="List contacts"
+        icon="user-group"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Lists all your contacts.
+    </Card>
+    <Card
+        title="Create Chat Session"
+        icon="message-plus"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Creates a chat session with a contact in any type of channel
+    </Card>
+        <Card
+        title="List Chat Sessions"
+        icon="messages"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Lists all chat sessions of organization.
+    </Card>
+      <Card
+        title="List Chat Session History"
+        icon="messages"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Lists the history of a particular chat session
+    </Card>
+    <Card
+        title="Make AI Phone Call"
+        icon="phone"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Make an AI phone call using your phone number created in Open
+    </Card>
+    <Card
+        title="Send Emails"
+        icon="envelope"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Send emails to multiple contacts, possibly with a time delay. To send emails using the API, you must first verify the domain you want to send emails from. You can add and verify custom domains in the settings.
+    </Card>
+</CardGroup>
+
+
+## Open Triggers
+<CardGroup cols={2}>
+    <Card
+        title="Conversation Started"
+        icon="messages"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Is triggered when a new conversation of any channel type starts
+    </Card>
+       <Card
+        title="Conversation Ended"
+        icon="messages"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Is triggered when a new conversation of any channel type ends
+    </Card>
+     <Card
+        title="Handoff to Human Agent"
+        icon="user-headset"
+        color="#f7b245" 
+        iconType="solid"
+    >
+      Triggers when a conversation is handed off to a human agent. Note that a handoff event can happen for multiple reasons; for example, a human agent might decide to take over the conversation, or the AI might decide to hand off the conversation to a human agent.
+    </Card>
+</CardGroup>
+
+
+
+## Steps for creating you first Zap using Open's Actions and Triggers
+
+### Creating a Zap using one of Open's Triggers
+<Steps>
+  <Step title="Go to you Zapier Zaps Dashborad">
+  <img src="/images/zapier-zaps.png" style={{ borderRadius: '8px' }} />
+    Firstly go to your Zapier Zaps Dashboard using [this](https://zapier.com/app/zaps) link, and signup if you do not have an account.
+  </Step>
+  <Step title="Create a new Zap">
+    Click on the "+ Create" button on the top right to create a new Zap. The following screen should now be visible.
+    <img src="/images/zap-preview.png" style={{ borderRadius: '8px' }} />
+    Press on the box with the title "Trigger"
+  </Step>
+  <Step title="Choosing Open's Triggers">
+    This screen should now be visible.
+    <img src="/images/zapier-app-search.png" style={{ borderRadius: '8px' }} />
+    In the search bar type "OpenCX" and our app should be visible to choose.
+    <img src="/images/zapier-choose-trigger.png" style={{ borderRadius: '8px' }} />
+    Choose this app.
+  </Step>
+   <Step title="Choosing Open's Triggers">
+    This screen should now be visible.
+    <img src="/images/choose-open-option.png" style={{ borderRadius: '8px' }} />
+    After choosing one of our triggers for this example we chose "Conversation Started", you will then press on the sign in button below to sign in using you Open Account so we can verify your identity.
+    You will then be redirected to this page
+    <img src="/images/zapier-login.png" style={{ borderRadius: '8px' }} />
+    Here we request an API key that is connected to you open account. To get this API key simply go to your [Open account](https://cloud.opencopilot.so/) and then go to the settings
+    <img src="/images/open-settings.png" style={{ borderRadius: '8px' }} />
+    Then choose "API Token" from the left menu
+    <img src="/images/open-settings-api-tokens.png" style={{ borderRadius: '8px' }} />
+    Press "Add" to add a new token, choose a name for this token. Copy the generated token and store it in a safe place, then paste it in the Zapier Login Screen like so.
+    <img src="/images/zapier-login-added-api-key.png" style={{ borderRadius: '8px' }} />
+    Then press continue and you will be immediatly redirected to your Zap.
+
+    Your trigger part of the Zap is now setup and ready!
+  </Step>
+</Steps>
+
+### Creating a Zap using one of Open's Actions
+
+For actions you will do the exact same steps as Triggers with the exception that you will be choosing Action instead.
+
+
+
+

docs/mint.json

@@ -85,7 +85,8 @@
       "group": "Native Integrations",
       "pages": [
         "dashboard/zendesk_integration",
-        "dashboard/shopify_integration"
+        "dashboard/shopify_integration",
+        "dashboard/zapier_integration"
       ]
     },
     {