diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 426596027defb21255f70b97828ce8eb8faa6b85..2bfdb9f96017f74d660c569b6f2e71b7fe174948 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -307,3 +307,7 @@ ul.controls {
     }
   }
 }
+
+ul.indent-list {
+  padding: 10px 0 0 30px;
+}
diff --git a/app/models/project_services/chat_slash_commands_service.rb b/app/models/project_services/chat_slash_commands_service.rb
index 5eb1bd86e9db5380ee1090a48a7ae19ca8ef4658..8b5bc24fd3c6b047df4365e7e125e41ade56e85a 100644
--- a/app/models/project_services/chat_slash_commands_service.rb
+++ b/app/models/project_services/chat_slash_commands_service.rb
@@ -23,7 +23,7 @@ class ChatSlashCommandsService < Service
 
   def fields
     [
-      { type: 'text', name: 'token', placeholder: '' }
+      { type: 'text', name: 'token', placeholder: 'XXxxXXxxXXxxXXxxXXxxXXxx' }
     ]
   end
 
diff --git a/app/models/project_services/mattermost_slash_commands_service.rb b/app/models/project_services/mattermost_slash_commands_service.rb
index b0f7a42f9a3abe5932c0530028405281a8d37e06..56f42d63b2d0c765c388d747406b4eaf7605f230 100644
--- a/app/models/project_services/mattermost_slash_commands_service.rb
+++ b/app/models/project_services/mattermost_slash_commands_service.rb
@@ -8,11 +8,11 @@ class MattermostSlashCommandsService < ChatSlashCommandsService
   end
 
   def title
-    'Mattermost Command'
+    'Mattermost slash commands'
   end
 
   def description
-    "Perform common operations on GitLab in Mattermost"
+    "Perform common operations in Mattermost"
   end
 
   def self.to_param
diff --git a/app/models/project_services/slack_slash_commands_service.rb b/app/models/project_services/slack_slash_commands_service.rb
index c34991e426287da2b74ae9ae296d5f2c5dfe2e2c..2182c1c7e4b733ba6db50c0319ce54a8f6973d16 100644
--- a/app/models/project_services/slack_slash_commands_service.rb
+++ b/app/models/project_services/slack_slash_commands_service.rb
@@ -2,11 +2,11 @@ class SlackSlashCommandsService < ChatSlashCommandsService
   include TriggersHelper
 
   def title
-    'Slack Command'
+    'Slack slash commands'
   end
 
   def description
-    "Perform common operations on GitLab in Slack"
+    "Perform common operations in Slack"
   end
 
   def self.to_param
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
index 8ca4c51a06426917e2c29061e5175318b5c105f3..3a323d94cc2e70daa3ae90b168d577cdd9f4c145 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -1,16 +1,19 @@
-- run_actions_text = "Perform common operations on this project: #{@project.name_with_namespace}"
+- run_actions_text = "Perform common operations on GitLab project: #{@project.name_with_namespace}"
 
-To setup this service:
-%ul.list-unstyled
+%p To setup this service:
+%ul.list-unstyled.indent-list
   %li
     1.
-    = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
+    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
+      Enable custom slash commands
+      = icon('external-link')
     on your Mattermost installation
   %li
     2.
-    = link_to 'Add a slash command', 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command'
-    in Mattermost with these options:
-
+    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command', target: '_blank', rel: 'noreferrer noopener nofollow' do
+      Add a slash command
+      = icon('external-link')
+    in your Mattermost team with these options:
 %hr
 
 .help-form
@@ -83,9 +86,14 @@ To setup this service:
 
 %hr
 
-%ul.list-unstyled
+%ul.list-unstyled.indent-list
   %li
-    3. After adding the slash command, paste the
-
-    %strong token
+    3. Paste the
+    %strong Token
     into the field below
+  %li
+    4. Select the
+    %strong Active
+    checkbox, press
+    %strong Save changes
+    and start using GitLab inside Mattermost!
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
index c1e576b42fc73bcebc061207d104afa1df51a57e..a04fd5035a6fb3660ef423f2b16a0e6b46dff554 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -1,13 +1,16 @@
 - enabled = Gitlab.config.mattermost.enabled
 
 .well
-  This service allows GitLab users to perform common operations on this
-  project by entering slash commands in Mattermost.
-  %br
-  See list of available commands in Mattermost after setting up this service,
-  by entering
-  %code /&lt;command_trigger_word&gt; help
-
+  %p
+    This service allows users to perform common operations on this
+    project by entering slash commands in Mattermost.
+    = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank', ref: 'noreferrer nofollow noopener' do
+      View documentation
+      = icon('external-link')
+  %p.inline
+    See list of available commands in Mattermost after setting up this service,
+    by entering
+  %kbd.inline /&lt;trigger&gt; help
   - unless enabled || @service.template?
     = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
index 04b9100acc69cafc1413a32006d0d86c4a9fbd70..0d973a20d4c9ccc18feebf5a3bb72db56e49a6ce 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -1,21 +1,25 @@
-- pretty_name = defined?(@project) ? @project.name_with_namespace : "namespace / path"
-- run_actions_text = "Perform common operations on this project: #{pretty_name}"
+- pretty_name = defined?(@project) ? @project.name_with_namespace : 'namespace / path'
+- run_actions_text = "Perform common operations on GitLab project: #{pretty_name}"
 
 .well
-  This service allows GitLab users to perform common operations on this
-  project by entering slash commands in Slack.
-  %br
-  See list of available commands in Slack after setting up this service,
-  by entering
-  %code /&lt;command&gt; help
-  %br
-  %br
+  %p
+    This service allows users to perform common operations on this
+    project by entering slash commands in Slack.
+    = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank', ref: 'noreferrer nofollow noopener' do
+      View documentation
+      = icon('external-link')
+  %p.inline
+    See list of available commands in Slack after setting up this service,
+    by entering
+  %kbd.inline /&lt;command&gt; help
   - unless @service.template?
-    To setup this service:
-    %ul.list-unstyled
+    %p To setup this service:
+    %ul.list-unstyled.indent-list
       %li
         1.
-        = link_to 'Add a slash command', 'https://my.slack.com/services/new/slash-commands'
+        = link_to 'https://my.slack.com/services/new/slash-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
+          Add a slash command
+          = icon('external-link')
         in your Slack team with these options:
 
     %hr
@@ -82,7 +86,7 @@
 
     %hr
 
-    %ul.list-unstyled
+    %ul.list-unstyled.indent-list
       %li
         2. Paste the
         %strong Token
diff --git a/doc/user/project/integrations/img/mattermost_config_help.png b/doc/user/project/integrations/img/mattermost_config_help.png
index a62e4b792f9efa41048a6d3b2a61f4f5b8dc8836..dd3481bc1f6a056a6ad01f15883b0dd6541de0c2 100644
Binary files a/doc/user/project/integrations/img/mattermost_config_help.png and b/doc/user/project/integrations/img/mattermost_config_help.png differ
diff --git a/doc/user/project/integrations/img/slack_setup.png b/doc/user/project/integrations/img/slack_setup.png
index f69817f2b78d6621915fcb1b0cc61359e7fe812d..7928fb7d495307c08b0c441b4b03feb1e110a934 100644
Binary files a/doc/user/project/integrations/img/slack_setup.png and b/doc/user/project/integrations/img/slack_setup.png differ
diff --git a/spec/features/projects/services/mattermost_slash_command_spec.rb b/spec/features/projects/services/mattermost_slash_command_spec.rb
index 042a1ccab51776c2949f7df690de1d93b170ba2f..f5adb53a2dc0be16fe3e85b2b4249bda437c6549 100644
--- a/spec/features/projects/services/mattermost_slash_command_spec.rb
+++ b/spec/features/projects/services/mattermost_slash_command_spec.rb
@@ -1,8 +1,6 @@
 require 'spec_helper'
 
 feature 'Setup Mattermost slash commands', feature: true do
-  include WaitForAjax
-
   let(:user) { create(:user) }
   let(:project) { create(:empty_project) }
   let(:service) { project.create_mattermost_slash_commands_service }
@@ -15,11 +13,15 @@ feature 'Setup Mattermost slash commands', feature: true do
     visit edit_namespace_project_service_path(project.namespace, project, service)
   end
 
-  describe 'user visits the mattermost slash command config page', js: true do
+  describe 'user visits the mattermost slash command config page' do
     it 'shows a help message' do
-      wait_for_ajax
+      expect(page).to have_content("This service allows users to perform common")
+    end
+
+    it 'shows a token placeholder' do
+      token_placeholder = find_field('service_token')['placeholder']
 
-      expect(page).to have_content("This service allows GitLab users to perform common")
+      expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
     end
 
     it 'shows the token after saving' do
@@ -64,7 +66,7 @@ feature 'Setup Mattermost slash commands', feature: true do
       select_element = find('select#mattermost_team_id')
       selected_option = select_element.find('option[selected]')
 
-      expect(select_element['disabled']).to be(true)
+      expect(select_element['disabled']).to eq('disabled')
       expect(selected_option).to have_content(team_name.to_s)
     end
 
@@ -93,7 +95,7 @@ feature 'Setup Mattermost slash commands', feature: true do
       select_element = find('select#mattermost_team_id')
       selected_option = select_element.find('option[selected]')
 
-      expect(select_element['disabled']).to be(false)
+      expect(select_element['disabled']).to be(nil)
       expect(selected_option).to have_content('Select team...')
       # The 'Select team...' placeholder is item `0`.
       expect(select_element.all('option').count).to eq(3)
@@ -135,6 +137,12 @@ feature 'Setup Mattermost slash commands', feature: true do
 
         expect(value).to match("api/v3/projects/#{project.id}/services/mattermost_slash_commands/trigger")
       end
+
+      it 'shows a token placeholder' do
+        token_placeholder = find_field('service_token')['placeholder']
+
+        expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
+      end
     end
   end
 
diff --git a/spec/features/projects/services/slack_slash_command_spec.rb b/spec/features/projects/services/slack_slash_command_spec.rb
index 32b32f7ae8eb0ca2414bf49db39c081e1df4e3c1..db903a0c8f061b6d157ebb253ede3fb87d59dd74 100644
--- a/spec/features/projects/services/slack_slash_command_spec.rb
+++ b/spec/features/projects/services/slack_slash_command_spec.rb
@@ -1,8 +1,6 @@
 require 'spec_helper'
 
 feature 'Slack slash commands', feature: true do
-  include WaitForAjax
-
   given(:user) { create(:user) }
   given(:project) { create(:project) }
   given(:service) { project.create_slack_slash_commands_service }
@@ -10,19 +8,20 @@ feature 'Slack slash commands', feature: true do
   background do
     project.team << [user, :master]
     login_as(user)
-  end
-
-  scenario 'user visits the slack slash command config page and shows a help message', js: true do
     visit edit_namespace_project_service_path(project.namespace, project, service)
+  end
 
-    wait_for_ajax
+  it 'shows a token placeholder' do
+    token_placeholder = find_field('service_token')['placeholder']
 
-    expect(page).to have_content('This service allows GitLab users to perform common')
+    expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
   end
 
-  scenario 'shows the token after saving' do
-    visit edit_namespace_project_service_path(project.namespace, project, service)
+  it 'shows a help message' do
+    expect(page).to have_content('This service allows users to perform common')
+  end
 
+  it 'shows the token after saving' do
     fill_in 'service_token', with: 'token'
     click_on 'Save'
 
@@ -31,9 +30,7 @@ feature 'Slack slash commands', feature: true do
     expect(value).to eq('token')
   end
 
-  scenario 'shows the correct trigger url' do
-    visit edit_namespace_project_service_path(project.namespace, project, service)
-
+  it 'shows the correct trigger url' do
     value = find_field('url').value
     expect(value).to match("api/v3/projects/#{project.id}/services/slack_slash_commands/trigger")
   end