-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
303 lines (229 loc) · 17.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mm-guide.css" type="text/css" rel="stylesheet">
<title>Mattermost User Guide</title>
</head>
<body>
<h1 class="logo-heading">HEADER_LINE</h1>
<h1 id="mattermost-user-guide">Mattermost User Guide</h1>
<p class="date">Updated: June 02, 2018</p>
<hr />
<p><img class="splash" src="img/index.jpg" alt="Cover image" /></p>
<h2 id="welcome-to-mattermost">Welcome to Mattermost!</h2>
<p><a href="https://mattermost.com/">Mattermost</a> is a team chat tool that is being used at ORGANIZATION_NAME for facilitating communication and collaboration across units and groups. With Mattermost, your project or group can set up a private “team” hosted on our local Mattermost server to communicate and share resources.</p>
<div style="page-break-before:always;"></div>
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#welcome-to-mattermost">Welcome to Mattermost!</a></li>
<li><a href="#about-this-guide">1. About this guide</a></li>
<li><a href="#getting-started">2. Getting started</a>
<ul>
<li><a href="#logging-in">2.1 Logging in</a></li>
<li><a href="#username">2.2 Username</a></li>
</ul>
</li>
<li><a href="#channels">4. Channels</a>
<ul>
<li><a href="#list-of-channels">4.1 List of channels</a></li>
</ul>
</li>
<li><a href="#hashtags">5. Hashtags</a></li>
<li><a href="#activities">6. Activities</a></li>
<li><a href="#beginner-checklist">7. Beginner checklist</a></li>
</ul>
<div style="page-break-before:always;"></div>
<h2 id="about-this-guide">1. About this guide</h2>
<p>This guide is designed to get you up and running with the Mattermost app as quickly as possible and to give you an opportunity to become familiar with many of the features that are available.</p>
<p>During the first few days after you receive your invitation link to the platform, it might be a good idea to work through this guide with the assistance of a mentor who is familiar with the platform.</p>
<div style="page-break-before:always;"></div>
<h2 id="getting-started">2. Getting started</h2>
<p><img src="img/app.png" alt="" /></p>
<p>Before you begin, make sure that you have installed the Mattermost app (not “Mattermost Classic”). If you are running into issues where the app is not working as expected (e.g., slow, not receiving messages or notifications etc), there is a good chance that you may have installed Mattermost Classic. Many display and responsiveness problems can be resolved by installing the correct app.</p>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=com.mattermost.rn">Get the Mattermost app on the <strong>Android Play Store</strong></a></li>
<li><a href="https://itunes.apple.com/us/app/mattermost/id1257222717?mt=8">Get the Mattermost app on the <strong>iPhone App Store</strong></a></li>
</ul>
<h3 id="logging-in">2.1 Logging in</h3>
<p>When you open the app for the first time it will ask you to enter a <strong>Server URL</strong>. Use the following URL to log in (make sure to include the <strong>https://</strong> at the beginning):</p>
<h4 class="channel" id="serveraddress">SERVER_ADDRESS</h4>
<h3 id="username">2.2 Username</h3>
<p>The local Mattermost server is not connected to your institutional ID, so you will need to create a new username and password to use the platform.</p>
<p>The username itself must be in Latin characters only (a-z and 0-9), which means accents and other diacritics can’t be used. Once you log in you will be able to set your Display Name or (Nickname), which will be visible to others and can include any characters you like, including accents, diacritics, or other character sets (see the Beginner checklist below for more details on how to change your Display Name).</p>
<div style="page-break-before:always;"></div>
<h2 id="channels">3. Channels</h2>
<p>Once you log in to the app using the Mattermost server invitation link provided to you, you should see an interface similar to the one in the screenshot below. You will find that the app is organized as a “team”, which is further divided into several “channels” with different topics:</p>
<ul>
<li class="illus"><img src="img/channels.png" alt="" /></li>
</ul>
<p>The default “Town Square” and “Off-Topic” channels are public, and depending on the team may be the only channels you are able to see after you first log in.</p>
<p>If your team is using private channels, you will not be able to see them when you first log in. After you have logged in your team administrator can invite you to view any private channels your team is using.</p>
<p>To activate the sidebar channel list, press the menu button (the three horizontal white lines on the far left in the screenshot below):</p>
<ul>
<li class="illus"><img src="img/channel-menu.png" alt="" /></li>
</ul>
<p>The channel title is at the top of the screen (in the centre of the above screenshot).</p>
<p>To switch to a different channel, just press the channel name in the sidebar.</p>
<div style="page-break-before:always;"></div>
<h2 id="beginner-checklist">6. Beginner checklist</h2>
<p>If there is not already a sandbox channel in your team, you can create one to provide a space where you can go through each of the items in the following step-by-step guide, which will help you get familiar with using the site.</p>
<p>Once you’re finished going through the checklist, head over to the <strong>Town Square</strong> or <strong>Off-Topic</strong> channel and say hi to the others in your team!</p>
<p>Below is the checklist – to get the most out of it, try to follow these in order!</p>
<p><br /><input type="checkbox" /> Post a message!</p>
<ul>
<li>Instructions: In a sanbox area (either create a private test channel or use a designated sandbox for your team), click on the textbox at the bottom of the screen (it should say “Write a message…”)
<ul>
<li class="illus"><img src="img/write-message.png" alt="" /></li>
</ul>
</li>
<li>Type something! It could be anything at all (if you can’t think of anything, try “Testing” or “Hi!” <img src="img/smiley.png" alt="" />)</li>
<li>A blue icon with a white arrow will appear on the right-hand side of the text box:
<ul>
<li class="illus"><img src="img/test-message.png" alt="" /></li>
</ul>
</li>
<li>Click on the icon to post your message to the channel</li>
<li>You’re done!</li>
</ul>
<p><br /><input type="checkbox" /> Reply to a message posted by someone else</p>
<ul>
<li>Instructions: Tap once on an existing message in the sandbox channel, ideally posted by another user</li>
<li>The message should open in a separate screen as a conversation “thread”</li>
<li>Write and post your response in the message textbox as above</li>
<li>Your message will be counted as a reply to the original post, and responses in the conversation will be kept in chronological order</li>
<li>To go back to the main channel, just press the arrow button on the top left:
<ul>
<li class="illus"><img src="img/back-to-channel.png" alt="" /></li>
</ul>
</li>
<li>If you want to see all the responses to a particular post in order, just tap once on the original post or any of the replies to show the whole conversation</li>
<li><em>Note: Replying to specific posts can help keep multiple conversations organized and can be particularly helpful if you have many members on your team</em></li>
</ul>
<p><br /><input type="checkbox" /> Edit a message</p>
<ul>
<li>Did you make a mistake in your post or have something you want to change or correct? No problem! You can easily edit your posts by following the steps below:</li>
<li>Long press on the post you want to edit</li>
<li>A menu should pop up</li>
<li>Choose <strong>Edit</strong> from the menu</li>
<li>Your post will open up in a new textbox where you can change or correct it</li>
<li>When you’re done, make sure to press the <strong>Save</strong> button on the top right to save your changes</li>
<li>You should now see your edited post in the main channel window</li>
<li><em>Note: You can only edit your own posts</em></li>
</ul>
<p><br /><input type="checkbox" /> Send a message to someone using the “@” feature</p>
<ul>
<li>If you want to get someone’s attention you can make sure that they get a notification by including their username after the @ symbol (e.g., @example)</li>
<li>Try it out! Address a message to someone on your team by including their name in your post</li>
<li><em>Note: To get the attention of <strong>everyone</strong> in a particular channel you can use @channel, but try to use this sparingly!</em></li>
</ul>
<p><br /><input type="checkbox" /> Upload a picture from your phone using the attach feature</p>
<ul>
<li>Tap on the <strong>plus (+) symbol</strong> to the left of the message textbox:
<ul>
<li class="illus"><img src="img/write-message.png" alt="" /></li>
</ul>
</li>
<li>Choose a source for the image (e.g. your phone camera or a picture from your photo gallery)</li>
<li>If you selected “Camera” then take a photo – you should then be taken back to the app</li>
<li>(Optionally) write a message to accompany your picture</li>
<li>Press the send button to post your message as usual</li>
<li>You’re done!</li>
</ul>
<p><br /><input type="checkbox" /> Post a message using emoji</p>
<ul>
<li>There is support for a large selection of emoji/emoticons</li>
<li>
<p>There are 3 ways to add emoji to a message:
<br /><input type="checkbox" /> Using simple “smiley” style, for example <strong>:)</strong> or <strong>:D</strong></p>
<p><br /><input type="checkbox" /> Using the name of the emoji surrounded by colon characters (:), for example <strong>:grin:</strong> or <strong>:joy:</strong></p>
<p><br /><input type="checkbox" /> Using the pop-up emoji selector – just type a colon character (:) and choose from the list that pops up (to narrow down the list, just start typing the name of the emoji you want)</p>
</li>
<li>Try it out! Use one of the methods above to post an emoji to the sandbox channel</li>
</ul>
<p><br /><input type="checkbox" /> Post a reaction to a message using a reaction emoji</p>
<ul>
<li>You can also use emoji to react to someone’s post without making a separate message yourself</li>
<li>Instructions: Just long-press on any message and tap on <strong>Add Reaction</strong></li>
<li>Then select an emoji from the list that pops up</li>
<li>You should see your selected emoji show up underneath the post as a reaction:
<ul>
<li class="illus"><img src="img/emoji-reactions.png" alt="" /></li>
</ul>
</li>
<li><em>Note: The total number of people who have reacted will be shown beside each emoji; if you tap on a reaction that someone else has posted, your reaction will be added to the total number!</em></li>
</ul>
<p><br /><input type="checkbox" /> Use simple formatting like <strong>bold</strong> and <em>italic</em></p>
<ul>
<li>Instructions: Use two asterisks (**) around a word or phrase to make it <strong>bold</strong>, for example **bold**</li>
<li>Use a single underscore on both sides of a word or phrase to make it <em>italic</em>, for example _italic_</li>
<li>Try it out! Post a message using bold or italic to the sandbox channel</li>
</ul>
<p><br /><input type="checkbox" /> Learn about more basic formatting</p>
<ul>
<li>The Mattermost app uses a text formatting syntax called <em>Markdown</em> that you might be familiar with if you have posted on various popular websites</li>
<li>You can find a detailed guide to formatting in Mattermost <a href="https://docs.mattermost.com/help/messaging/formatting-text.html">here</a></li>
<li>Try it out! Follow the <a href="https://docs.mattermost.com/help/messaging/formatting-text.html">formatting guide</a> to post a message to the sandbox channel with <strong>strikethrough</strong> text, a clickable <strong>link</strong>, or a <strong>table</strong></li>
</ul>
<p><br /><input type="checkbox" /> Use a hashtag “#” to categorize your message</p>
<ul>
<li>Hashtags make it easier to organize and find posts</li>
<li>Hashtags are clickable like links, and begin with a # character</li>
<li>You can create hashtags using any word or phrase (without spaces) preceded with a <strong># character</strong>, for example #agenda or #followup</li>
<li>Try it! Post a message using the hashtag #test or #testing</li>
<li>Then tap on the hashtag link to see other posts with the same tag</li>
<li><em>Note: To click on hashtag links, you will need to log in to <a href="SERVER_ADDRESS">the web interface</a> using the username and password you created earlier</em></li>
</ul>
<p><br /><input type="checkbox" /> Log into the web interface</p>
<ul>
<li>Some advanced features require you to use the <a href="SERVER_ADDRESS">Mattermost web interface</a>, for example:
<ul>
<li>Changing your Display name or Nickname</li>
<li>Previewing links</li>
<li>Embedding images</li>
<li>Viewing embedded YouTube videos</li>
<li>Changing the app theme</li>
<li>Changing the interface language</li>
</ul>
</li>
<li>The optional steps below show you how to access these features</li>
<li>In most other ways, the web interface is essentially the same as the mobile app – you can post, use emoji, and catch up on new messages</li>
<li>Try it out! Go to the <a href="SERVER_ADDRESS">Mattermost web interface</a> and try posting something in the sandbox channel using the hashtag #web</li>
</ul>
<p><br /><input type="checkbox" /> <strong>(OPTIONAL)</strong> Embed an existing online image in a message</p>
<ul>
<li>Using the online <a href="SERVER_ADDRESS">web interface</a>, you can embed images with the following simple code:
<ul>
<li><code>)</code></li>
</ul>
</li>
<li><em>Note: make sure to post this exact code (with a different link, of course) or the image won’t show up</em></li>
</ul>
<p><br /><input type="checkbox" /> <strong>(OPTIONAL)</strong> Set up your notification preferences</p>
<ul>
<li>Instructions: Activate the sidebar by pressing the menu button (the three horizontal white lines on the far left in the screenshot below):</li>
<li><em>If using the mobile app:</em> Press the three-dot icon at the top right hand corner of the sidebar and select <strong>Settings</strong> from the options that appear (see screenshot below)
<ul>
<li class="illus"><img src="img/settings-menu.png" alt="" /></li>
</ul>
</li>
<li><em>If using the web interface:</em> Select “Account Settings” (the first option in the Settings menu)</li>
<li>Select “Notifications”</li>
<li>You may want to disable email notifications</li>
<li>You can choose to be notified only on being mentioned by name, or for all new activity on the site (this could result in quite a lot of notifications, depending on the size of your team!)</li>
</ul>
<p><br /><input type="checkbox" /> <strong>(OPTIONAL)</strong> Set your preferred display name</p>
<ul>
<li>Instructions: To change your display name, you will need to log in to <a href="SERVER_ADDRESS">the web interface</a> using the username and password you created earlier</li>
<li>Click on the menu icon in the sidebar and then select <strong>Account Settings</strong></li>
<li>Under the <strong>General</strong> tab, change the name beside <strong>“Nickname”</strong> to your preferred name as you would like it to be visible to others on your team</li>
</ul>
<hr />
<p><strong>We hope you have found this guide helpful. See you online!</strong></p>
<footer>
<p>Guide prepared by <a href="https://github.com/dohliam">@dohliam</a>. For source details and instructions on how to build this guide for your own organization, see the <a href="https://github.com/dohliam/mattermost-user-guide">repository on GitHub</a>.</p>
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p>
</footer>
</body>
</html>