diff --git a/.changeset/smart-pots-cry.md b/.changeset/smart-pots-cry.md
new file mode 100644
index 00000000..3f27e4e3
--- /dev/null
+++ b/.changeset/smart-pots-cry.md
@@ -0,0 +1,5 @@
+---
+'react-use-intercom': minor
+---
+
+Exposes showTicket and showConversation methods in useIntercom hook
diff --git a/README.md b/README.md
index 10665a80..65616e20 100644
--- a/README.md
+++ b/README.md
@@ -150,6 +150,8 @@ Used to retrieve all methods bundled with Intercom. These are based on the offic
| startSurvey | (surveyId: number) => void | Trigger a survey in the Messenger by `surveyId`
| showSpace | (spaceName: IntercomSpace) => void | Opens the Messenger with the specified space
| showNews | (newsId: number) => void | Opens the Messenger with the specified news by `newsId`
+| showTicket | (ticketId: number) => void | Opens the Messenger with the specified ticket by `ticketId`
+| showConversation | (conversationId: number) => void | Opens the Messenger with the specified conversation by `conversationId`
#### Example
@@ -182,7 +184,9 @@ const HomePage = () => {
trackEvent,
showArticle,
startSurvey,
- showSpace
+ showSpace,
+ showTicket,
+ showConversation
} = useIntercom();
const bootWithProps = () => boot({ name: 'Russo' });
@@ -200,6 +204,8 @@ const HomePage = () => {
const handleShowArticle = () => showArticle(123456);
const handleStartSurvey = () => startSurvey(123456);
const handleShowSpace = () => showSpace('tasks');
+ const handleShowTicket = () => showTicket(123);
+ const handleShowConversation = () => showConversation(123);
return (
<>
@@ -226,6 +232,8 @@ const HomePage = () => {
+
+
>
);
};
diff --git a/packages/react-use-intercom/README.md b/packages/react-use-intercom/README.md
index 6de20b74..0492fa31 100644
--- a/packages/react-use-intercom/README.md
+++ b/packages/react-use-intercom/README.md
@@ -149,6 +149,8 @@ Used to retrieve all methods bundled with Intercom. These are based on the offic
| showArticle | (articleId: string) => void | opens the Messenger with the specified article by `articleId`
| startSurvey | (surveyId: number) => void | Trigger a survey in the Messenger by `surveyId`
| showSpace | (spaceName: IntercomSpace) => void | Opens the Messenger with the specified space
+| showTicket | (ticketId: number) => void | Opens the Messenger with the specified ticket by `ticketId`
+| showConversation | (conversationId: number) => void | Opens the Messenger with the specified conversation by `conversationId`
#### Example
```ts
@@ -180,7 +182,9 @@ const HomePage = () => {
trackEvent,
showArticle,
startSurvey,
- showSpace
+ showSpace,
+ showTicket,
+ showConversation
} = useIntercom();
const bootWithProps = () => boot({ name: 'Russo' });
@@ -198,6 +202,8 @@ const HomePage = () => {
const handleShowArticle = () => showArticle(123456);
const handleStartSurvey = () => startSurvey(123456);
const handleShowSpace = () => showSpace('tasks');
+ const handleShowTicket = () => showTicket(123);
+ const handleShowConversation = () => showConversation(123);
return (
<>
@@ -224,6 +230,8 @@ const HomePage = () => {
+
+
>
);
};
diff --git a/packages/react-use-intercom/src/provider.tsx b/packages/react-use-intercom/src/provider.tsx
index 79bb9c91..83d8076a 100644
--- a/packages/react-use-intercom/src/provider.tsx
+++ b/packages/react-use-intercom/src/provider.tsx
@@ -264,6 +264,22 @@ export const IntercomProvider: React.FC<
[ensureIntercom],
);
+ const showTicket = React.useCallback(
+ (ticketId: number) =>
+ ensureIntercom('showTicket', () => {
+ IntercomAPI('showTicket', ticketId);
+ }),
+ [ensureIntercom],
+ );
+
+ const showConversation = React.useCallback(
+ (conversationId: number) =>
+ ensureIntercom('showConversation', () => {
+ IntercomAPI('showConversation', conversationId);
+ }),
+ [ensureIntercom],
+ );
+
const providerValue = React.useMemo(() => {
return {
boot,
@@ -283,6 +299,8 @@ export const IntercomProvider: React.FC<
startSurvey,
showSpace,
showNews,
+ showTicket,
+ showConversation,
};
}, [
boot,
@@ -302,6 +320,8 @@ export const IntercomProvider: React.FC<
startSurvey,
showSpace,
showNews,
+ showTicket,
+ showConversation,
]);
return (
diff --git a/packages/react-use-intercom/src/types.ts b/packages/react-use-intercom/src/types.ts
index c4eab801..4f6d3ce7 100644
--- a/packages/react-use-intercom/src/types.ts
+++ b/packages/react-use-intercom/src/types.ts
@@ -247,7 +247,9 @@ export type IntercomMethod =
| 'startChecklist'
| 'showArticle'
| 'showSpace'
- | 'showNews';
+ | 'showNews'
+ | 'showTicket'
+ | 'showConversation';
export type RawIntercomProps = RawMessengerAttributes & RawDataAttributes;
@@ -446,6 +448,21 @@ export type IntercomContextValues = {
* @example showNews(123)
*/
showNews: (newsId: number) => void;
+ /**
+ * If you would like to trigger a ticket in the Messenger, you can use the showTicket method.
+ *
+ * The ticket will be shown within the Messenger, and clicking the Messenger back button will return to the previous context.
+ *
+ * If the Messenger is closed when the method is called, it will be opened first and then the ticket will be shown.
+ * @see {@link https://developers.intercom.com/installing-intercom/web/methods/#intercomshowticket-ticketid}
+ */
+ showTicket: (ticketId: number) => void;
+ /**
+ * You can show a conversation programatically in the Messenger by calling showConversation method
+ *
+ * @see {@link https://developers.intercom.com/installing-intercom/web/methods/#intercomshowconversation-conversationid}
+ */
+ showConversation: (conversationId: number) => void;
};
export type IntercomProviderProps = {