Advanced messaging

Standalone messaging on new page

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>

Standalone messaging on existing page

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>

Forums + messaging

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>

Forums + messaging demo

Commenting + messaging

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>

Commenting + messaging demo

Direct Message Launcher

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>

JavaScript setup

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.

Example JavaScript setup.

Options

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.

API

The messaging call returns a JavaScript API

var app = $('#messaging').messaging('goma')

Here's a lisf of the available methods and properties:

API overview

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>; ...

Events

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 operating
  • post – when a private post was received
  • thread – when a new thread was received
  • close – when the client is closed

Post object

Represents 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,
}

User object

Users take following format:

{
  img: '//secure.gravatar.com/avatar/c2cf4630e2df087c46540ef34076e83a?s=120',
  displayname: 'jlehtinen',
  path: '@jlehtinen'
}

Thread object

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
}