Use the following code to include Muut on a new page. This code will generate a blank page with the messaging button in the bottom right corner by default. You can add custom and addition content within the <body>
tag as usual.
Replace [community-name] placeholder with name provided during setup. Can be found at the end your URL https://muut.com/ [community-name]
<!DOCTYPE HTML>
<head>
<title>Muut messaging</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Muut CSS -->
<link rel="stylesheet" href="path/to/moot.css">
<link rel="stylesheet" href="path/to/muut-messaging.css">
</head>
<body>
<!-- Messaging launcher element -->
<div id="messaging"></div>
<!-- Muut depends on jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- Muut JavaScript -->
<script src="path/to/moot.min.js"></script>
<script src="path/to/muut-messaging.js"></script>
<!-- Start messaging with a community name: "[community-name]" -->
<script>$('#messaging').messaging('[community-name]')</script>
</body>
Use this quick embed code to include Messaging with any existing page. Demo
Replace [community-name] placeholder with name provided during setup. Can be found at the end your URL https://muut.com/ [community-name]
<span class=“muut-messaging” data-forumname="[community-name]">Messages</span>
<script src="//cdn.muut.com/1/moot.min.js"></script>
Replace [community-name] placeholder with name provided during setup. Can be found at the end your URL https://muut.com/ [community-name]
Forums and messaging work with following elements inside the <body>
:
<!-- container for forums -->
<a class="muut" href="https://muut.com/i/goma"></a>
<!-- the launcher element for messaging (on bottom right) -->
<span class="muut-messaging">Messages</spn>
<!-- muut application -->
<script src="http://cdn.muut.com/1/moot.min.js"></script>
Replace [community-name] placeholder with name provided during setup. Can be found at the end your URL https://muut.com/ [community-name]
Same as above, but with a container for commenting:
<!-- container for commenting -->
<a class="muut" href="https://muut.com/i/goma/comments" type="dynamic"></a>
<!-- the launcher element for messaging -->
<span class="muut-messaging">Messages</spn>
<!-- muut application -->
<script src="http://cdn.muut.com/1/moot.min.js"></script>
Launch a direct message to a specific user with a single click! This is super great for support or contact forms. Demo
Replace [community-name] placeholder with name provided during setup. Can be found at the end your URL https://muut.com/ [community-name]. "Display name" is the name that will appear to users, and the
<username>
tag is essential. Be sure to remove the@
symbol from the username before using it.
<button class="m-button muut-messaging-button" data-recipients="Display Name <username>; Another name <username2>" data-forumname="[community-name]">Message username and username2</button>
<script src="//cdn.muut.com/1/moot.min.js"></script>
The messaging client can be initialized with JavaScript so you can have more control of the timing, configuration options and you can get the handle to the API. In this case you need to explicitly define all the required scripts and styles on the page. This is how the application knows that nothing should be loaded behind the scenes and the user wishes to intall Muut "manually" with JavaScript.
Here's a complete source code:
<!DOCTYPE html>
<html>
<head>
<title>Muut messaging</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- muut application styles -->
<link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">
<link rel="stylesheet" href="https://cdn.muut.com/1/muut-messaging.css">
</head>
<body>
<!-- messaging launcher -->
<span class="muut-messaging">Messages</b></span>
<!-- required scripts -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdn.muut.com/1/moot.min.js"></script>
<script src="https://cdn.muut.com/1/muut-messaging.min.js"></script>
<script>
muut.messaging('goma', function(api) {
console.info('Messaging API:', api)
})
</script>
</body>
</html>
The launcher element can be customized with any text or HTML and you can also style it with CSS – place it elsewhere or use your own colors.
The first argument for the muut.messaging
call is the name of your community that is provided on the setup.
The messaging application supports following configuration options
url
– the URL to your forum "https://muut.com/my-forum" or just the forumname "my-forum"
hide_admins
– hides the administrator shortcuts for sending them messages
hide_username
- hides all occurrences of the username from the UI. This is useful if you are using federated identity and the username is an UUID meant for for non-humans.
The generic format for initializing the client is this:
muut.messaging(options, function(api) {
// here the api ready to use
})
When the options
argument is a String
it represents the forumname
.
The messaging
call also accepts a function as the second argument which is called when the Messaging API is ready and fully functional.
Learn the embedding details for forums and commenting.
The messaging
call returns a JavaScript API
var app = $('#messaging').messaging('goma')
Here's a lisf of the available methods and properties:
By playing with the browser's developer console you can get a good idea of what is possible.
Here we cover the most important ones.
launch([fn])
Launches the messaging client. Anonymous users need to login first. fn
is a callback method that is invoked after the client is loaded.
You can see the launch method in action on our imaginary about page. Look for the source code to see how it's done.
start(participnts)
Start a new conversation by prefilling the input field on top of the messaging UI. The participant is a string
with following format:
John Doe <username>; Mike Monroe <mmonroe>; ...
Use the on
method to get notified when something crucial happens on the client. For example:
app.on('post', function(post) {
console.info('A post on a private conversation was received', post)
})
Here's a list of the possible events:
load
– when the client API is ready and fully operatingpost
– when a private post was receivedthread
– when a new thread was receivedclose
– when the client is closedRepresents a single post on a conversation. Looks like this:
{
conversationId: '0a0e7c5bb1dfd37bb216104ab74cf2c4', // parent conversation id
postId: '6d797ad780ce9685b76839b0e2079eba',
body: 'This is body of the post',
ts: 1443614871, // timestamp
unread_count: 0,
from: User,
}
Users take following format:
{
img: '//secure.gravatar.com/avatar/c2cf4630e2df087c46540ef34076e83a?s=120',
displayname: 'jlehtinen',
path: '@jlehtinen'
}
Represents a single conversation containing multiple messages. Looks like this:
{
conversationId: '0a0e7c5bb1dfd37bb216104ab74cf2c4', // unique id
participants: Array[User],
posts: Array[post],
lastReply: post,
reply_count: 19,
unread_count: 1
}