Skip to content

Commit 0065e53

Browse files
authored
Link out to the tutorial for styling instructions in the README
1 parent 118504c commit 0065e53

File tree

1 file changed

+14
-29
lines changed

1 file changed

+14
-29
lines changed

howtos/how-to-make-a-threaded-chat/README.md

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,17 @@ To run this tutorial, you will need:
1212

1313
## How to run the tutorial
1414

15-
1. Clone or download the project.
16-
2. Run `npm install` to install dependencies.
17-
3. Run `npm start` to start the server.
18-
4. Remove the default "Reply" message action:
19-
1. Go to the **Roles** tab of the TalkJS dashboard.
20-
2. Select the "default" role.
21-
3. In **Actions and permissions** > **Built-in message actions**, set **Reply** to **None**.
22-
5. Add a "Reply" action button to the user message styling of your theme:
23-
1. Go to the **Themes** tab of the TalkJS dashboard.
24-
2. Select to **Edit** the theme you use for your "default" role.
25-
3. In the list of **Built-in Components**, select **UserMessage**.
26-
4. Add the following line below the `<MessageBody />` component:
27-
```
28-
<ActionButton t:if="{{ custom.replyCount > 0 }}" action="replyInThread">Replies ({{ custom.replyCount }})</ActionButton>
29-
<ActionButton t:else action="replyInThread">Reply</ActionButton>
30-
```
31-
5. If you are in Live mode, select **Copy to live**.
32-
6. Add a "Back" action button to the chat header of your theme:
33-
1. Go to the **Themes** tab of the TalkJS dashboard.
34-
2. Select to **Edit** the theme you use for your "default" role.
35-
3. In the list of Built-in Components, select **ChatHeader**.
36-
4. Find the code for displaying the user's name in the header (something like `<span>{{user.name}}</span>`) and replace it with the following:
37-
`<span><ActionButton action="back">&lt; Back</ActionButton>{{user.name}}</ActionButton></span>`
38-
5. If you are in Live mode, select **Copy to live**.
39-
7. Set up a webhook to respond to new message events:
40-
1. Go to the **Settings** tab of the TalkJS dashboard.
41-
2. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard.
42-
3. Start ngrok with `ngrok http 3000`.
43-
4. Add the ngrok URL to **Webhook URLs** in the TalkJS dashboard, including the `updateReplyCount` path: `https://<YOUR-URL>.ngrok.io/updateReplyCount`
15+
1. Clone or download the project.
16+
2. Run `npm install` to install dependencies.
17+
3. Run `npm start` to start the server.
18+
4. Remove the default "Reply" message action:
19+
1. Go to the **Roles** tab of the TalkJS dashboard.
20+
2. Select the "default" role.
21+
3. In **Actions and permissions** > **Built-in message actions**, set **Reply** to **None**.
22+
5. Add a "Reply" action button to the user message styling of your theme following [the tutorial instructions](https://talkjs.com/resources/how-to-build-a-reply-thread-feature-with-talkjs/#add-the-reply-button-to-your-theme)
23+
6. Add a "Back" action button to the chat header of your theme following [the tutorial instructions](https://talkjs.com/resources/how-to-build-a-reply-thread-feature-with-talkjs/#add-the-back-button-to-your-theme)
24+
7. Set up a webhook to respond to new message events:
25+
1. Go to the **Settings** tab of the TalkJS dashboard.
26+
2. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard.
27+
3. Start ngrok with `ngrok http 3000`.
28+
4. Add the ngrok URL to **Webhook URLs** in the TalkJS dashboard, including the `updateReplyCount` path: `https://<YOUR-URL>.ngrok.io/updateReplyCount`

0 commit comments

Comments
 (0)