Skip to content

Commit 8e26628

Browse files
new image links
1 parent 82c6678 commit 8e26628

File tree

6 files changed

+42
-42
lines changed

6 files changed

+42
-42
lines changed

docs/english/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ After you fill out an app name (_you can change it later_) and pick a workspace
2525

2626
This page contains an overview of your app in addition to important credentials you'll need later.
2727

28-
![Basic Information page](/img/basic-information-page.png "Basic Information page")
28+
![Basic Information page](/img/bolt-python/basic-information-page.png "Basic Information page")
2929

3030
Look around, add an app icon and description, and then let's start configuring your app 🔩
3131

@@ -49,7 +49,7 @@ We're going to use bot and app-level tokens for this guide.
4949

5050
4. Once you authorize the installation, you'll land on the **OAuth & Permissions** page and see a **Bot User OAuth Access Token**.
5151

52-
![OAuth Tokens](/img/bot-token.png "Bot OAuth Token")
52+
![OAuth Tokens](/img/bolt-python/bot-token.png "Bot OAuth Token")
5353

5454
5. Then head over to **Basic Information** and scroll down under the App Token section and click **Generate Token and Scopes** to generate an app-level token. Add the `connections:write` scope to this token and save the generated `xapp` token, we'll use both these tokens in just a moment.
5555

docs/english/tutorial/ai-chatbot/ai-chatbot.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,19 +100,19 @@ Navigate to the Bolty **App Home** and select a provider from the drop-down menu
100100

101101
If you don't see Bolty listed under **Apps** in your workspace right away, never fear! You can mention **@Bolty** in a public channel to add the app, then navigate to your **App Home**.
102102

103-
![Choose your AI provider](/img/tutorials/ai-chatbot/6.png)
103+
![Choose your AI provider](6.png)
104104

105105
## Setting up your workflow {#workflow}
106106

107107
Within your development workspace, open Workflow Builder by clicking on your workspace name and then **Tools > Workflow Builder**. Select **New Workflow** > **Build Workflow**.
108108

109109
Click **Untitled Workflow** at the top to rename your workflow. For this tutorial, we'll call the workflow **Welcome to the channel**. Enter a description, such as _Summarizes channels for new members_, and click **Save**.
110110

111-
![Setting up a new workflow](/img/tutorials/ai-chatbot/1.png)
111+
![Setting up a new workflow](1.png)
112112

113113
Select **Choose an event** under **Start the workflow...**, and then choose **When a person joins a channel**. Select the channel name from the drop-down menu and click **Save**.
114114

115-
![Start the workflow](/img/tutorials/ai-chatbot/2.png)
115+
![Start the workflow](2.png)
116116

117117
Under **Then, do these things**, click **Add steps** and complete the following:
118118

@@ -121,20 +121,20 @@ Under **Then, do these things**, click **Add steps** and complete the following:
121121
3. Under **Add a message**, enter a short message, such as _Hi! Welcome to `{}The channel that the user joined`. Would you like a summary of the recent conversation?_ Note that the _`{}The channel that the user joined`_ is a variable; you can insert it by selecting **{}Insert a variable** at the bottom of the message text box.
122122
4. Select the **Add Button** button, and name the button _Yes, give me a summary_. Click **Done**.
123123

124-
![Send a message](/img/tutorials/ai-chatbot/3.png)
124+
![Send a message](3.png)
125125

126126
We'll add two more steps under the **Then, do these things** section.
127127

128128
First, scroll to the bottom of the list of steps and choose **Custom**, then choose **Bolty** and **Bolty Custom Function**. In the **Channel** drop-down menu, select **Channel that the user joined**. Click **Save**.
129129

130-
![Bolty custom function](/img/tutorials/ai-chatbot/4.png)
130+
![Bolty custom function](4.png)
131131

132132
For the final step, complete the following:
133133

134134
1. Choose **Messages** and then **Send a message to a person**. Under **Select a member**, choose **Person who clicked the button** from the drop-down menu.
135135
2. Under **Add a message**, click **Insert a variable** and choose **`{}Summary`** under the **Bolty Custom Function** section in the list that appears. Click **Save**.
136136

137-
![Summary](/img/tutorials/ai-chatbot/5.png)
137+
![Summary](5.png)
138138

139139
When finished, click **Finish Up**, then click **Publish** to make the workflow available in your workspace.
140140

@@ -149,7 +149,7 @@ In order for Bolty to provide summaries of recent conversation in a channel, Bol
149149

150150
To test this, leave the channel you just invited Bolty to and rejoin it. This will kick off your workflow and you'll receive a direct message from **Welcome to the channel**. Click the **Yes, give me a summary** button, and Bolty will summarize the recent conversations in the channel you joined.
151151

152-
![Channel summary](/img/tutorials/ai-chatbot/7.png)
152+
![Channel summary](7.png)
153153

154154
The central part of this functionality is shown in the following code snippet. Note the use of the [`user_context`](https://tools.slack.dev/deno-slack-sdk/reference/slack-types#usercontext) object, a Slack type that represents the user who is interacting with our workflow, as well as the `history` of the channel that will be summarized, which includes the ten most recent messages.
155155

@@ -191,7 +191,7 @@ To ask Bolty a question, you can chat with Bolty in any channel the app is in. U
191191

192192
You can also navigate to **Bolty** in your **Apps** list and select the **Messages** tab to chat with Bolty directly.
193193

194-
![Ask Bolty](/img/tutorials/ai-chatbot/8.png)
194+
![Ask Bolty](8.png)
195195

196196
## Next steps {#next-steps}
197197

docs/english/tutorial/custom-steps-workflow-builder-existing/custom-steps-workflow-builder-existing.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ In order to add custom workflow steps to an app, the app also needs to be org-re
2828

2929
Navigate to **Org Level Apps** in the left nav and click **Opt-In**, then confirm **Yes, Opt-In**.
3030

31-
![Make your app org-ready](/img/tutorials/custom-steps-wfb-existing/org-ready.png)
31+
![Make your app org-ready](org-ready.png)
3232

3333
## Adding a new workflow step {#add-step}
3434

@@ -54,19 +54,19 @@ Navigate to **App Manifest** in the left nav and add the `function_executed` eve
5454

5555
Navigate to **Workflow Steps** in the left nav and click **Add Step**. This is where we'll configure our step's inputs, outputs, name, and description.
5656

57-
![Add step](/img/tutorials/custom-steps-wfb-existing/add-step.png)
57+
![Add step](add-step.png)
5858

5959
For illustration purposes in this tutorial, we're going to write a custom step called Request Time Off. When the step is invoked, a message will be sent to the provided manager with an option to approve or deny the time-off request. When the manager takes an action (approves or denies the request), a message is posted with the decision and the manager who made the decision. The step will take two user IDs as inputs, representing the requesting user and their manager, and it will output both of those user IDs as well as the decision made.
6060

6161
Add the pertinent details to the step:
6262

63-
![Define step](/img/tutorials/custom-steps-wfb-existing/define-step.png)
63+
![Define step](define-step.png)
6464

6565
Remember this `callback_id`. We will use this later when implementing a function listener. Then add the input and output parameters:
6666

67-
![Add inputs](/img/tutorials/custom-steps-wfb-existing/inputs.png)
67+
![Add inputs](inputs.png)
6868

69-
![Add outputs](/img/tutorials/custom-steps-wfb-existing/outputs.png)
69+
![Add outputs](outputs.png)
7070

7171
Save your changes.
7272

@@ -260,19 +260,19 @@ Click the button to create a **New Workflow**, then **Build Workflow**. Choose t
260260

261261
In the **Steps** pane to the right, search for your app name and locate the **Request time off** step we created.
262262

263-
![Find step](/img/tutorials/custom-steps-wfb-existing/find-step.png)
263+
![Find step](find-step.png)
264264

265265
Select the step and choose the desired inputs and click **Save**.
266266

267-
![Step inputs](/img/tutorials/custom-steps-wfb-existing/step-inputs.png)
267+
![Step inputs](step-inputs.png)
268268

269269
Next, click **Finish Up**, give your workflow a name and description, then click **Publish**. Copy the link for your workflow on the next screen, then click **Done**.
270270

271271
### Running the workflow {#run-workflow}
272272

273273
In any channel where your app is installed, paste the link you copied and send it as a message. The link will unfurl into a button to start the workflow. Click the button to start the workflow. If you set yourself up as the manager, you will then see a message from your app. Pressing either button will return a confirmation or denial of your time off request.
274274

275-
![Message](/img/tutorials/custom-steps-wfb-existing/app-message.png)
275+
![Message](app-message.png)
276276

277277
## Next steps {#next-steps}
278278

docs/english/tutorial/custom-steps-workflow-builder-new/custom-steps-workflow-builder-new.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ We now have a Bolt app ready for development! Open the `manifest.json` file and
5858

5959
Open a browser and navigate to [your apps page](https://api.slack.com/apps). This is where we will create a new app with our previously copied manifest details. Click the **Create New App** button, then select **From an app manifest** when prompted to choose how you'd like to configure your app's settings.
6060

61-
![Create app from manifest](/img/tutorials/custom-steps-wfb-new/manifest.png)
61+
![Create app from manifest](manifest.png)
6262

6363
Next, select a workspace where you have permissions to install apps, and click **Next**. Select the **JSON** tab and clear the existing contents. Paste the contents of the `manifest.json` file you previously copied.
6464

@@ -74,7 +74,7 @@ Another configuration setting to note is **Socket Mode**. We have turned this on
7474

7575
Clicking on **Workflow Steps** in the left nav will show you that one workflow step has been added! This reflects the `function` defined in our manifest: functions are workflow steps. We will get to this step's implementation later.
7676

77-
![Workflow step](/img/tutorials/custom-steps-wfb-new/workflow-step.png)
77+
![Workflow step](workflow-step.png)
7878

7979
### Tokens {#tokens}
8080

@@ -85,17 +85,17 @@ In order to connect our app here with the logic of our sample code set up locall
8585

8686
To generate an app token, navigate to **Basic Information** and scroll down to **App-Level Token**.
8787

88-
![App token](/img/tutorials/custom-steps-wfb-new/app-token.png)
88+
![App token](app-token.png)
8989

9090
Click **Generate Token and Scopes**, then **Add Scope** and choose `connections:write`. Choose a name for your token and click **Generate**. Copy that value, save it somewhere accessible, and click **Done** to close out of the modal.
9191

9292
Next up is the bot token. We can only get this token by installing the app into the workspace. Navigate to **Install App** and click the button to install, choosing **Allow** at the next screen.
9393

94-
![Install app](/img/tutorials/custom-steps-wfb-new/install.png)
94+
![Install app](install.png)
9595

9696
You will then have a bot token. Again, copy that value and save it somewhere accessible.
9797

98-
![Bot token](/img/tutorials/custom-steps-wfb-new/bot-token.png)
98+
![Bot token](bot-token.png)
9999

100100
💡 Treat your tokens like passwords and keep them safe. Your app uses them to post and retrieve information from Slack workspaces. Minimally, do NOT commit them to version control.
101101

@@ -130,59 +130,59 @@ The starter project you cloned contains a sample custom step lovingly titled “
130130

131131
In the Slack Client of your development workspace, open Workflow Builder by clicking on the workspace name, **Tools**, then **Workflow Builder**. Create a new workflow, then select **Build Workflow**:
132132

133-
![Creating a new workflow](/img/tutorials/custom-steps-wfb-new/wfb-1.png)
133+
![Creating a new workflow](wfb-1.png)
134134

135135
Select **Choose an event** under **Start the workflow...**, then **From a link in Slack** to configure this workflow to start when someone clicks its shortcut link:
136136

137-
![Starting a new workflow from a shortcut link](/img/tutorials/custom-steps-wfb-new/wfb-2.png)
137+
![Starting a new workflow from a shortcut link](wfb-2.png)
138138

139139
Click the **Continue** button to confirm that this is workflow should start with a shortcut link:
140140

141-
![Confirming a new shortcut workflow setup](/img/tutorials/custom-steps-wfb-new/wfb-3.png)
141+
![Confirming a new shortcut workflow setup](wfb-3.png)
142142

143143
Find the sample step provided in the template by either searching for the name of your app (e.g., `Bolt Custom Step`) or the name of your step (e.g. `Sample step`) in the Steps search bar.
144144

145145
If you search by app name, any custom step that your app has defined will be listed.
146146

147147
Add the “Sample step" in the search results to the workflow:
148148

149-
![Adding the sample step to the workflow](/img/tutorials/custom-steps-wfb-new/wfb-4.png)
149+
![Adding the sample step to the workflow](wfb-4.png)
150150

151151
As soon as you add the “Sample step" to the workflow, a modal will appear to configure the step's input—in this case, a user variable:
152152

153-
![Configuring the sample step's inputs](/img/tutorials/custom-steps-wfb-new/wfb-5.png)
153+
![Configuring the sample step's inputs](wfb-5.png)
154154

155155
Configure the user input to be “Person who used this workflow”, then click the **Save** button:
156156

157-
![Saving the sample step after configuring the user input](/img/tutorials/custom-steps-wfb-new/wfb-6.png)
157+
![Saving the sample step after configuring the user input](wfb-6.png)
158158

159159
Click the **Finish Up** button, then provide a name and description for your workflow.
160160

161161
Finally, click the **Publish** button:
162162

163-
![Publishing a workflow](/img/tutorials/custom-steps-wfb-new/wfb-7.png)
163+
![Publishing a workflow](wfb-7.png)
164164

165165
Copy the shortcut link, then exit Workflow Builder and paste the link to a message in any channel you’re in:
166166

167-
![Copying a workflow link](/img/tutorials/custom-steps-wfb-new/wfb-8.png)
167+
![Copying a workflow link](wfb-8.png)
168168

169169
After you send a message containing the shortcut link, the link will unfurl and you’ll see a **Start Workflow** button.
170170

171171
Click the **Start Workflow** button:
172172

173-
![Starting your new workflow](/img/tutorials/custom-steps-wfb-new/wfb-9.png)
173+
![Starting your new workflow](wfb-9.png)
174174

175175
You should see a new direct message from your app:
176176

177-
![A new direct message from your app](/img/tutorials/custom-steps-wfb-new/wfb-10.png)
177+
![A new direct message from your app](wfb-10.png)
178178

179179
The message from your app asks you to click the **Complete step** button:
180180

181-
![A new direct message from your app](/img/tutorials/custom-steps-wfb-new/wfb-11.png)
181+
![A new direct message from your app](wfb-11.png)
182182

183183
Once you click the button, the direct message to you will be updated to let you know that the step interaction was successfully completed:
184184

185-
![Sample step finished successfully](/img/tutorials/custom-steps-wfb-new/wfb-12.png)
185+
![Sample step finished successfully](wfb-12.png)
186186

187187
Now that we’ve gotten a feel for how we will use the custom step, let’s learn more about how function listeners work.
188188

docs/english/tutorial/modals/modals.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Let's take a look at the technologies we'll use in this tutorial:
1414
## Final product overview {#final_product}
1515
If you follow through with the extra credit tasks, your final app will look like this:
1616

17-
![Final product](/img/tutorials/modals/final_product.gif)
17+
![Final product](final_product.gif)
1818

1919
---
2020

@@ -65,21 +65,21 @@ Here's a copy of what the modal payload looks like — this is what powers t
6565

6666
3. Find the base path to your server by clicking **Share**, then copy the Live site link.
6767

68-
![Get the base link](/img/tutorials/modals/base_link.gif)
68+
![Get the base link](base_link.gif)
6969

7070
4. On your app page, navigate to **Interactivity & Shortcuts**. Append "/slack/events" to your base path URL and enter it into the **Request URL** e.g., `https://festive-harmonious-march.glitch.me/slack/events`. This allows your server to retrieve information from the modal. You can see the code for this within the Glitch project.
7171

72-
![Interactivity URL](/img/tutorials/modals/interactivity_url.png)
72+
![Interactivity URL](interactivity_url.png)
7373

7474
5. Create the slash command so you can access it within Slack. Navigate to the **Slash Commands** section and create a new command. Note the **Request URL** is the same link as above, e.g. `https://festive-harmonious-march.glitch.me/slack/events` . The code that powers the slash command and opens a modal can be found within the Glitch project.
7575

76-
![Slash command details](/img/tutorials/modals/slash_command.png)
76+
![Slash command details](slash_command.png)
7777

7878
6. Select **Install App**. After you've done this, you'll see a **Bot User OAuth Access Token**, copy this.
7979

8080
7. Navigate to your Glitch project and click the `.env` file where the credentials are stored, and paste your bot token where the `SLACK_BOT_TOKEN` variable is shown. This allows your server to send authenticated requests to the Slack API. You'll also need to head to your app's settings page under **Basic Information** and copy the _Signing secret_ to place into the `SLACK_SIGNING_SECRET` variable.
8181

82-
![Environment variables](/img/tutorials/modals/heart_icon.gif)
82+
![Environment variables](heart_icon.gif)
8383

8484
8. Test by heading to Slack and typing `/thankyou`.
8585

docs/japanese/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ lang: ja-jp
2626

2727
このページでは、アプリの概要や重要な認証情報を確認できます。これらの情報は後ほど参照します。
2828

29-
![Basic Information ページ](/img/basic-information-page.png "Basic Information ページ")
29+
![Basic Information ページ](/img/bolt-python/basic-information-page.png "Basic Information ページ")
3030

3131
ひと通り確認して、アプリのアイコンと説明を追加したら、アプリのプロジェクトの構成 🔩 を始めましょう。
3232

@@ -50,7 +50,7 @@ Slack アプリで使用できるトークンには、ユーザートークン
5050

5151
4. インストールを承認すると **OAuth & Permissions** ページが表示され、**Bot User OAuth Access Token** を確認できるでしょう。
5252

53-
![OAuth トークン](/img/bot-token.png "ボット用 OAuth トークン")
53+
![OAuth トークン](/img/bolt-python/bot-token.png "ボット用 OAuth トークン")
5454

5555
5. 次に「**Basic Informationのページ**」まで戻り、アプリレベルトークンのセクションまで下にスクロールし「**Generate Token and Scopes**」をクリックしてアプリレベルトークンを作成します。このトークンに `connections:write` のスコープを付与し、作成された `xapp` トークンを保存します。これらのトークンは後ほど利用します。
5656

0 commit comments

Comments
 (0)