Merge pull request #114 from openreplay/zendesk-int

src/i18n/en/nav.ts

@@ -99,6 +99,7 @@ export default [
 	{ text: 'GitHub', slug: 'integrations/github', key: 'integrations/troubleshooting' },
 	{ text: 'Google Tag Manager', slug: 'integrations/google-tag-manager', key: 'integrations/troubleshooting' },
 	{ text: 'Jira Cloud', slug: 'integrations/jira', key: 'integrations/troubleshooting' },
+	{text: 'Zendesk', slug: 'integrations/zendesk', key: 'integrations/troubleshooting'},
 	{ text: 'MSTeams', slug: 'integrations/msteams', key: 'integrations/troubleshooting' },
 	{ text: 'New Relic', slug: 'integrations/newrelic', key: 'integrations/troubleshooting' },
 	{ text: 'Rollbar', slug: 'integrations/rollbar', key: 'integrations/troubleshooting' },

src/pages/en/integrations.mdx

@@ -26,6 +26,7 @@ Get the most out of OpenReplay by integrating it with your favorite tools.
 <div class="card">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
     <IconText title="Jira" url="/integrations/jira" />
+	<IconText title="Zendesk" url="/integrations/zendesk"/>
     <IconText title="GitHub" url="/integrations/github" />
     <IconText title="Slack" url="/integrations/slack" />
     <IconText title="Teams" url="/integrations/msteams" />
@@ -37,4 +38,4 @@ Get the most out of OpenReplay by integrating it with your favorite tools.
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
     <IconText title="Segment" url="/integrations/segment" />
 </div>
-</div>
+</div>

src/pages/en/integrations/zendesk.mdx

@@ -0,0 +1,39 @@
+---
+title: "Zendesk Integration"
+metaTitle: "Zendesk Integration with OpenReplay"
+metaDescription: "How to integrate Zendesk with OpenReplay."
+---
+
+How to integrate Zendesk with OpenReplay.
+
+Easiest way to integrate Zendesk with Openreplay is to use the [Text app](https://www.zendesk.com/marketplace/apps/support/1691/text/) to  add a link to user's sessions to your ticket pages.
+
+## Installation
+
+- Install the free [Text app](https://www.zendesk.com/marketplace/apps/support/1691/text/) from the Zendesk marketplace.
+
+- Specify a preferred title (i.e "Openreplay links").
+
+- For the text display, you can follow this format (making sure to change OPENREPLAY_DOMAIN and PROJECT_ID with valid address and ID)
+
+```
+https://<OPENREPLAY_DOMAIN>/<PROJECT_ID>/sessions?uid=is|{{ticket.requester.email}}&range=LAST_24_HOURS
+```
+
+- To view the link, navigate to a ticket and open the Apps panel by clicking the Apps button in the upper right.
+
+[Text app documentation](https://www.zendesk.com/marketplace/apps/support/1691/text/).
+
+## Changing the format
+
+You can test your link format by going to your OpenReplay instance and changing the search, starting with User Id filter,
+then adding any important events, for example, this query searches for
+all sessions that had a bad request and are associated with the user email:
+
+```
+https://<OPENREPLAY_DOMAIN>/<PROJECT_ID>/sessions?uid=is|{{ticket.requester.email}}&iss=is|bad_request&range=LAST_24_HOURS
+```
+
+## Have questions?
+
+If you encounter any issues, connect to our [Slack](https://slack.openreplay.com) and get help from our community.

src/util/getIcons.ts

@@ -96,6 +96,10 @@ export function getSVGIcon(title: string) {
              return (`
              <img class="h-7 w-7" src="/landing-icons/icon-jira.svg" alt="Jira" />
              `)
+			case 'zendesk':
+				return (`
+					<img class='h-7 w-7' src="/landing-icons/icon-zendesk.svg" alt="Zendesk" />
+				`)
          case 'slack':
              return (`
              <img class="h-7 w-7" src="/landing-icons/icon-slack.svg" alt="Slack" />