New Check out Muut IO for developers

Muut Help

FAQ Answers to the most common questions.

Forum Search for information or ask from us and other users.

Demos Muut example setups.

Documentation In-depth articles on using and integrating Muut.

Latest releases Info on latest features and fixes & upcoming features.

Cannot find the answer? Email us!

Getting started

Tour

Elements

A Muut forum.

1 Post box is used for starting new moots. Click 2 help to learn about post formatting options. 3 The preview area lets you see what your post will look like.

4 A moot consists of the seed post and all the replies to it.

5 The seed post can have a title. 6 The info area shows the poster’s profile picture and name, how long ago it was posted, 7 speech bubble icon how many replies there are, 8 like icon how many people liked the post (when that includes you, the heart icon is pink), 9 watch button (pink when the post is watched by you, meaning you get a mail notification when a new reply is posted on the thread while you are away), 10 remove icon with time counter (for your own posts for 2.7 minutes after posting), and 11 mark as spam icon.

12 Replies only have the body text and no title.

13 The reply box is shown under the replies.

14 The speech bubble shows how many older replies are hidden from the view, while 15 Less allows you to hide older replies.

16 ... indicates that the post is collapsed; click to view the entire post. 17 Less… allows you to collapse it again.

Formatting

Italics and bolding

Text can be italicized by adding “_” at the beginning and end of the text to be italicized. You can also bold single words by adding “*” at the beginning and end of the word to be bolded.

Monospacing

Code snippets and other bits of text are rendered as monospaced text when placed inside backtics (`).

Emoticons

Following 18 emoticons are supported (ie. converted into black and white vector graphics):

:) :D :O :* :| :( :P :/ :'( 8) >:( >:O <3

Emoticons

Quoting

You can quote (ie. italicize and grey out) a text passage by selecting it and clicking the quote icon, which will move the quoted text in the text box. Text quoted in this manner will be linked to the original text, if it’s loaded on the page.

You can also manually quote text by inserting > at the beginning of each quoted paragraph.

Quote

Syntax highlight

A block of code can automatically be formatted by adding &dash;&dash;&dash; at the beginning and the end of a code block:

‐‐‐
<code>
‐‐‐

You can also manually indicate the programming language:

‐‐‐ html
<html>
  <code></code>
</html>
‐‐‐

There are over 50 recognized languages.

Syntax highlight

Linking

19 Links are automatically formatted to hide the “http://“ part, and for some of the most popular websites, to replace the name of the site with an icon with the site’s logo.

Link icons

Links to picture formats (such as JPG, PNG etc.) and videos from YouTube and Vimeo are opened in a gallery view (with all the pictures and videos from that post) when clicked.

User account

20 Avatar is the profile picture either uploaded by the user, or taken from Gravatar or Facebook. If no avatar is uploaded or found, the default avatar is shown. A new picture can be uploaded by clicking on the avatar and choosing a file from the computer, or by dragging and dropping the file onto the picture.

21 Username is an ID for the user containing a minimum of 5 lowercase characters, numbers or a hyphen ‘-‘. Username cannot be changed later.

22 Display name is shown on all user’s posts’.

23 Online status (shown in the Online users area) can be hidden and shown.

24 Email is used for sending mail notifications for new replies on watched moots, newsletters, and password reset.

25 Watched moots count is shown here, with the option to unwatch all.

26 Notify me of new releases When this is selected, you will receive occasional newsletters on new Muut releases.

27 Change password You can reset your password here. When clicked, you get prompted for the old and a new password.

Notifications

The notification at the bottom of the page pops up when there are new posts.

Text only

We take discussion very seriously, and we are proud to say Muut is a text-only discussion platform. Give people a chance to post pictures, and you’ll see lots of them, at the expense of the discussion. In a body of text, a picture, even stamp-size, will draw all of the attention to itself.

An uploaded image appears as link and once you click it you’ll see a gallery view optimized for viewing images:

Content is forever

Posts cannot be edited. After posting, there is a time frame of 2 minutes and 42 seconds during which you can remove your post. The text will then return to the edit box for modifying and reposting, if you like. Once the time has passed, your post will become permanent.

Forum Administrators cannot edit posts either, but they can delete posts at any time.

This is what happens when users can arbitrarily delete posts.

Demos

Muut is designed from the first day to be flexible: you can thoroughly customize the looks via CSS and Muut Designer, restrict access to your forum via secure embedding and Federated identity, and ultimately, upon the release of our API, you will be able to extend and transform Muut in every interesting way.

Here you will find a growing array of demos showcasing how Muut can be customized and adapted to all kinds of purposes and scenarios.

Styles

Custom UI

  • Custom sidebar Morph the sidebar in interesting ways: sticky posts, polls, etc. How
  • Hide top navigation Do not show “My feed” and “All posts” buttons at the top of your forum.

Commenting

Setup and tweaks

Access control

  • Secure embedding Prevent other sites to embed the client on their page. How
  • Federated identity Provide user details on client initialization. Allows the use of own user database and login screen How

Experimental

  • AJAX Use AJAX instead of WebSocket for communication.

FAQ

What are Muut channels and threads?

Your Muut data are organized in a tree-like structure with an intuitive analogy to the tree of directories (folders) of the file systems that you know of. Muut data are composed of units of discussion called threads, in which users post their writings. Threads can be organized into any hierarchy of channels designed by you, just like how you sort your files into your own folder structure. It’s straightforward: each channel can contain any number of threads, and/or any number of sub-channels. Within each thread, we also refer to the starting post as the seed post.

Why is Muut both a forum and commenting system? Are the two separate?

Indeed, surprising to you or not, Muut is for commenting as well as forums. But not that Muut has two sub-systems for each purpose. Muut has a new idea that unifies the two applications.

It might not seem obvious to you upon first thought, but however they feel different, your forum and commenting application are means to a single end: a system to host, organize, and administer your online interactions with your community on all things of common interest. The two are present in different forms and locations, but together they are one coherent database of your Web activity. Hence this body of content should not be fragmented into disconnected platforms and infrastructures. This is among the core values of Muut: forum and commenting must be unified.

In particular, Muut unifies the two applications under a single tree of discussions. Quite intuitively, this tree has one or more branches, each of which in turn has zero or more sub-branches as well as leaves. You know this structure already: you make a tree of folders and files to store your information, where the folders and their sub-folders are the branches, and the files are the leaves. The Muut tree is no different. Your community-name is the root, which must bear at least one branch, referred to as a “channel”. Each channel can hold any number of discussion topics referred to as “threads”, which are the leaves. Besides threads, a channel may contain any number of subchannels. Within such a tree, every channel or thread has a unique address, referred to as its “path”. In fact, you can create a new channel by specifying its path URL. Note that in a path to a thread, the thread identifier is appended to its channel via a colon, for example, /music/classical:bach is the path to a discussion thread named “Bach”, while /music/classical alone is the path to the channel named “Classical” under its parent channel “Music”.

How do I get email notification?

To receive email notification for a thread, you need to watch it first (indicated by the magenta eye icon). You will be automatically watching a thread as soon as you post in it (either you start the thread, or reply to it). You can also manually opt in to watch any thread by clicking the eye icon. As long as at least one page is loaded and you are logged in, Muut won’t send you any email (that would be redundant as Muut has in-page realtime notification). Only if you are offline (no page is open, or you are logged out) will you get notification by email.

The email will link to the post that triggered the notification, but subsequent posts won’t trigger further email to be sent until you visit that link.

Can I add sticky posts to my forum?

Yes, on embedded forums, you can add sticky posts or threads to the navigation pane on the right. To do so, you need to customize the navigation via HTML. It is very straightforward markup: basically you add post/thread links to the Muut container, and they will be sticky on the sidebar. See code examples here.

Why can’t I edit/delete my post after 2.7 min?

Only forum admins/moderators can delete posts without the 2.7 min limit. However, even they cannot modify the content posted by others. This immutability of content isn’t merely an optional feature, but a universally enforced rule based on our core value of permanence, that in order to truthfully record and preserve the intact progression of a discussion, modification of submitted content must be disallowed, as soon as someone likes or replies to the post, or after a brief period of 2.7 min, whichever happens first. In fact, content immutability is well established in instant messaging, for rather obvious reasons: having the liberty to modify what’s been previously said can easily invalidate the subsequent conversation, for what you refer to would be shifting sand, on which no trustable communication can be built. This strong dependence on the integrity of history for building a good discussion simply demands the rule that what’s been posted cannot be changed.

Traditional forums did not manage to appreciate the criticality of this restriction in building healthy communities; they possibly thought individuals should have total control over their content. However, a forum discussion is not solo publishing, it belongs to the entire group of participants, not any particular individual. Granting individuals the liberty to mutate submitted content will inevitably harm the participants as a whole (imagine someone reactively mutating or even negating original stances or opinions, which the subsequent conversation is based upon, resulting in breaking apart the entire thread of discussion). Ultimately, the only common ground that can ever be established is to make submitted content unmodifiable without exception. This way everyone can rest assured that what they post can never be modified by moderators, and content by fellow users stay as is so that your reply will never be invalidated as a result of mutation/deletion of what you refer to.

So think modern forum applications like Muut as instant messaging in its core but enriched with power tools, hence the inherited immutability is quite natural. At Muut we not only want to make better software, but strive to encourage better content generation. Knowing that what you say is immutable is a very powerful way to make you say better things in the first place.

No doubt there are edits for good causes, like fixing typos, streamlining expressions and so on. However, it is impractical for software to discern with absolute reliability the good edits from the bad without false positives and false negatives. For instance, fixing a typo can effectively serve the purpose of negating the meaning of a word. We must make a choice based on cost evaluation. We believe that the cost of disallowing content editing is significantly lower than that of allowing it, because the alternative solution to editing is much simpler than struggling to guard the well-being of a community while allowing arbitrary content mutation. For example, instead of editing your submitted content, you could

  • proof-read before submission (a great habit to develop), and remind yourself that what you say can stay forever as is,

  • quote the part that needs correction/update and comment on it in a follow-up post.

On the other hand, allowing content editing gives rise to endless tricky scenarios that can be exploited. For example, ill moderators can modify users’ posts to arbitrarily eliminate undesirable content and/or fake desirable content, even completely rewrite the content with their own, effectively impersonating whoever they want within the community.

Therefore, the rule of permanence is and will be firmly held to protect both users and admins of all Muut communities.

Can I hold user generated content from going live before my approval?

This is referred to as “pre-moderation”. Muut is deeply dedicated to realtime, instant messaging-like online discussion with no communication delay and no holding back of user engagement (Manifesto). The pre-moderation machinery is definitely harmful for creating the healthy kind of communities that Muut love to see. Hence no, we don’t ever let users see “Your post is pending for approval”.

Nevertheless, we are absolutely aware of the importance of moderation and spam filtering in the well-being of online communities. We have both automatic and manual spam control in place, and will be continuously improving in this regard in the future.

Can I display images in my post?

In Muut, images are displayed as links, inline with the rest textual content. Full images are one click away, shown as overlays in a lightbox-style gallery. We believe that discussion should be centered on text, the flow shouldn’t be interrupted and the focus shouldn’t be shifted due to the presence of eye-catching images.

However, we offer a Muut plugin that turns plain-text image links into thumbnails. To enable it, follow the instruction here.

Can I remove all the Muut branding once I upgrade?

No, we do not offer Muut as a white-label product, namely the option of complete removal of the Muut logo is not available. This holds for any service level, including Enterprise subscriptions. Customers who subscribe to the Mini plan or above are able to predominantly brand Muut with their own logo, color and banner, but the Muut logo will still be present at the bottom. Considering that Muut is a fully hosted service rather than a package that you install and maintain on your own, this is how we keep the price tag as low as possible, and at the same time gain continuous publicity as we grow.

Can I delete my forum?

Forums once created cannot be deleted. If you just don’t like the community-name, which is a unique ID of your forum, note that you cannot change that either. In that case you should simply create a new forum with the desired community-name. There is no limit on the number of forums you can create under your @username. Those forums that you no longer use can be simply abandoned – other users won’t be able to connect between you and those forums that you have created.

The liberty to delete forums arbitrarily can be easily abused and is against our principle of content permanence, so we give no exceptions regardless of the intention. To learn why permanence is critical to online discussion, please read the Muut manifesto.

Can I delete my account?

We will be implementing the account termination mechanism soon. Until then, you can take a simple step to effectively disconnect yourself from the content that you created: in your user settings, change the “Display name” to an unidentifiable dummy string such as “Canceled account”.

Once implemented and you take the option to initiate the termination process, your Muut account will be irreversibly removed with all the associated rights revoked. However, the content that you created across Muut communities will not be automatically deleted as part of the process; Instead, those posts will be attributed to an anonymous username that won’t identify you. You may manually remove any content from the forum(s) on which you owned admin rights, but not from those that you were a regular user of. The reason behind this decision is that we take the responsibility for the integrity of the forums owned by others: they shouldn’t lose their community content involuntarily due to certain users terminating their account. However, you may contact the admins of those forums requesting content removal.

Who owns the content?

Technically the user owns their own content and they grant a permanent license to Muut under our terms of service which includes our handling of any liability issues that come up with that content (like DMCA requirements).

As a forum owner we grant you a permanent license to it as well. So that means you can pull your forum content and use it however you like forever. Your forum content is, in all intents and purposes, yours to use however you like.

We essentially act as a proxy for the rights to the content taking the logistical issues that come up with user generated content and pass along the license to you free of that. The primary benefit to having direct rights to the content bypassing us (available for enterprise users) is that you can design the terms of service so that the terms are compatible with the rest of your service, or if there is simply a legal/liability requirement that you handle things like DMCA requests yourself.

Embedding

Quick embedding

NOTE If you are using WordPress, Shopify, or Wix, please check with your platform’s help page first.

The quickest way to embed Muut on your own website is to place the following two-line snippet (also available on your Settings panel) on your page wherever you’d like the forum to be displayed (often at the end of the page, right before the closing </body> tag):

<a class="muut" href="https://muut.com/i/community-name">Your Community Title</a>
<script src="//cdn.muut.com/1/moot.min.js"></script>

To embed Muut in your language, simply pick the localized edition of Muut. For example, <script src="//cdn.muut.com/1/moot.fi.min.js"></script> gives you a forum in Finnish. The complete language options are documented here.

Reload the page and you have Muut running on your site! The two-line snippet is the ideal solution when you either don’t have full control over your website (e.g. you can’t modify the <head> of the page), or you simply prefer minimal modification of your existing page in order to start using Muut.

If you do have full rights to author your website and plan to create a dedicated page just for your Muut community, you can start from a blank HTML document as follows:

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>Your Community Title</title>
  </head>
  <body>
   <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a>
   <script src="//cdn.muut.com/1/moot.min.js"></script>
  </body>
</html>

Note The Muut client application loads all the dependencies (jQuery and the Muut stylesheet) on its own, no need for manual inclusion.

Comment embedding

One of the unique ideas of Muut is that forum and commenting should not be two separate systems. In Muut, they are just two different “views” of the same thing - a tree of discussions. With this understanding, embedding a comment section isn’t much different from embedding the forum. The forum is the view of all the “visible” branches of the tree, while a comment section is the view of just one spot on the tree. By default, that spot in the tree is invisible from the forum view, but if you declare its path in the list of channels on the forum sidebar (see custom navigation), they will be accessible in the full forum view as well.

Quick comment embedding

The easiest way to embed flat Muut commenting on a page is by dropping a simple anchor, much like the quick forum embed:

<a href="https://muut.com/i/[community-name]/comments" class="muut" type="dynamic">Comments</a>
<script src="//cdn.muut.com/1/moot.min.js"></script>

By using the type="dynamic" attribute, it will dynamically generate the Muut path for that page under a hidden “comments” channel based on the page’s path.
NOTE You should only use this method if the path for the page it is on will not change. If the path changes, the comments will be reset, as it will generate a new path for the page.

On the other hand, you can always specify your own flat comments path, in the flat commenting section of this page. If you used this dynamic method already and your page’s path has changed, you can simply specify the old path explicitly that way. The path generation algorithm just replaces all slashes (/) with dashes (-) and strips special characters. So if the old page was located at http://yoursite.com/path/page-location.html the Muut path would be https://muut.com/i/[community-name]/comments:path-page-locationhtml. You can also see all the comment “threads” (and their paths) by visiting the channel explicitly: https://muut.com/[community-name]/comments.

Threaded commenting

In order to use threaded commenting, you’ll have to specify your own path on a given page. A threaded comment section is essentially a full forum channel, but embedded on a single page. In the context of blog commenting, a reader can either start a new thread (a top-level comment) stating his opinions on the article, or reply underneath an existing thread, as a nested comment, namely to comment on a comment.

You are at absolute liberty to design the Muut tree, here we just suggest a reasonable structure that helps you aggregate and organize the comments from all of your blogs and other sites. It is a good practice to gather all the comments under one top-level channel, e.g. /comments. With this design, your link for comment embedding will look like this:

<a class="muut" href="https://muut.com/i/[community-name]/comments/blog-name/article-name" data-show_title="false">Comments</a>

For readers who are new to configuring a blog on code level, we show a more complete example of the <body> content below for the sake of simulating the whole picture:

<body>
  <header><!-- Site Header --></header>

  <section id="main">
   <article><!-- Blog Article --></article>

   <section id="comments">
    <a class="muut" href="https://muut.com/i/community-name/comments/blog-name/article-name" data-show_title="false">Comments</a>
   </section>
  </section>

  <footer><!-- Site Footer --></footer>

  <script src="//cdn.muut.com/1/moot.min.js"></script>
</body>

Flat commenting

If you would like a simplistic, linear “timeline” of comments staying focused directly on your article, without nested comments on other comments, then you need to embed a “leaf” rather than a “branch” on your page, i.e. you should specify a path to a single thread instead of to a channel. Along with the example above, this time article-name will be appended to the branch blog-name via a : symbol, since now it is just a single thread.

<a class="muut" href="https://muut.com/i/[community-name]/comments/blog-name:article-name">Comments</a>


NOTE For an intuitive introduction to the structure of a Muut tree, see this FAQ.

Advanced embedding

You might be among those who demand more technical control. Even if you’re so happy with the two-line snippet as a Muut beginner now, you will likely evolve through time finding yourself shifting towards the more geeky end of the spectrum, and before you notice, you start to ask for more tweaks and customizations to make your Muut forum look and behave the way you desire. How about crafting a nested list of channels on the sidebar, instead of a flat one?

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />

   <title>Your Forum Title</title>

   <link rel="stylesheet" href="https://cdn.muut.com/1/moot.css" />
   <style>.m-custom .nested {margin-left: 1em;}</style>
  </head>

  <body>
   <div class="muut">
    <a class="muut-url" href="https://muut.com/i/community-name">Your Forum Title</a>

    <!-- custom sidebar -->
    <div class="m-h3">Your Forum Title</div>

    <a href="#!/chan1">Channel 1</a>
    <div class="nested">
      <a href="#!/chan1/subchan1">Subchannel 1</a>
      <a href="#!/chan1/subchan2">Subchannel 2</a>
    </div>
    <a href="#!/chan2">Channel 2</a>
   </div>

   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   <script src="//cdn.muut.com/1/moot.min.js"></script>
  </body>
</html>

Note above that we flesh out the root element from a link to a div with the same class name muut, which in turn contains a similar SEO link with a slightly different class name muut-url. This empowers us to specify a custom hierarchy of channels, as well as any other content you’d like to display on the sidebar.

Muut grants you total control over how you organize your discussions into an arbitrary hierarchy of channels, in a way much like how you structure a tree of folders on your file system. You define a channel using a link element pointing to a path, which takes the form #!/level1/level2 and can have an arbitrary depth. To visualize the nesting relationship, we wrap the subchannels in a div and offset its left margin.

Custom wording

You can change individual words or sentences by modifying the moot.language object right after where the moot.min.js script has been included. For example

<script src="//cdn.muut.com/1/moot.min.js"></script>
<script>moot.language.start = "What's up?"</script>

You can change every language token from the application. The available options are here.

jQuery.extend provides a convenient way to change multiple tokens at once. For example

$.extend(moot.language, {

  // your custom words and sentences
  comment1: "Be the first to comment",
  reply: "Post a reply"

});

Image Thumbnail Plugin

Even though Muut doesn’t support image posts or image thumbnails, by default, adding image thumbnail support is possible.

Images/memes can often skew a community towards attention seekers rather than discussion. It’s for this reason that a community hosted on Muut.com will never support image posts or image thumbnails. This content, instead, appears as a link. (check out our Manifesto!) However, we developed an addon that allows community owners the ability to transform image links into image thumbnails on embedded communities only.


Unofficial Quick Embedding w/Image Thumbnail Plugin

NOTE This method is not backwards compatible. It will only work on HTML5 browsers, and is not officially supported.

A quick embed is a fast way for lay administrators get their page running with the Image Thumbnail Plugin. It is, however, important to note this method does not follow “best practices” for web development. Not having access to the code on your website is a good reason to use this method, but if you do have access to your code, the Advanced method is recommended.

<link rel="stylesheet" href="//cdn.muut.com/1/moot.css" />
    <link rel="stylesheet" href="//cdn.muut.com/1/plugin/thumb.css" />
    <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//cdn.muut.com/1/moot.min.js"></script>
    <script src="//cdn.muut.com/1/plugin/thumb.js"></script>

Line 3 of the embed code <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a> must be edited to link to your Muut community. You can find your community-name on your quick embed settings page. And just replace “Your Community Title” with whatever gives you warm fuzzies.


Official Advanced Embedding w/Image Thumbnail Plugin

The only supported methods for embedding a Muut community with the Image Thumbnail Plugin requires code level access to your website. That means, you will either need to edit the HTML or be able to “inject” or add small snippets of code to both the <head> </head> and <body> </body> sections the page you intend to embed your community on.


Existing Pages

If your website only allows code injections, be sure you can edit the <head> and <body> tags. The CSS or link tags allow the look and feel of muut to remain consistent after the addition of the Image Thumbnail Plugin. The <a> and <script> code blocks insert your Muut community and the plugin, so be sure you place it where you want your community to appear.

Edit your <head> to include the following block:

<head>
    <link rel="stylesheet" href="//cdn.muut.com/1/moot.css" />
    <link rel="stylesheet" href="//cdn.muut.com/1/plugin/thumb.css" />
    </head>

Your <body> tag should be edited to included the following block:

<body>
     <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a>
     <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
     <script src="//cdn.muut.com/1/moot.min.js"></script>
     <script src="//cdn.muut.com/1/plugin/thumb.js"></script>
    </body>

As with the quick embedding option, you will need to make sure you edit line 3 of the embed code <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a> And as always, your community-name can still be found on your quick embed settings page.

If you already have Muut embedded you’ll notice a few changes in this script from the small embed code we give you to start out with. Both lines 4 and 6 contain important additions to this embed code and are essential to make your community work with the Image Thumbnail Plugin. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> must be included before your moot.min.js embed code and thumb.js must be incuded after moot.min.js.


New Page

Embedding your forum with a new page that you have HTML level access to, is wicked easy. just drop this code onto your page. Not tomfoolery necessary.

<!DOCTYPE html>
     <html>
      <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Your Forum Title</title>
      <link rel="stylesheet" href="//cdn.muut.com/1/moot.css" />
      <link rel="stylesheet" href="//cdn.muut.com/1/plugin/thumb.css" />
     </head>
     <body>
     <a class="muut" href="https://muut.com/i/community-name">Your Forum Title</a>
     <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
     <script src="//cdn.muut.com/1/moot.min.js"></script>
     <script src="//cdn.muut.com/1/plugin/thumb.js"></script>
     </body>
     </html>

We know we said no tomfoolery necessary, but we don’t even know what that means, so don’t forget to edit to include your community-name. Turns out you can still find it at your quick embed settings page.

Custom navigation

When you set up a Muut forum, the sidebar with channels is created by default.

This default navigation can also be customized with HTML, overriding the default setup. You can setup subchannels, sticky posts/threads, ads, banners, images, polls or forms, to name a few possibilities.

Here is an example:

Muut forum with custom navigation

You’ll use a slightly different installation syntax when setting up custom HTML. Here is a minimal example:

<!-- Muut placeholder tag -->
<div class="muut">

  <!-- Muut API -->
  <a class="muut-url" href="https://muut.com/i/your_forumname">Acme forums</a>

  <!-- Custom HTML -->
  <a href="/a/link/to/somewhere.html">
    <img src="/an/awesome/image.png">
  </a>

</div>

The differences to the basic installation are

  1. The forum placeholder is a DIV tag which is a block element. Block element can be used as a container for other HTML elements such as forms, tables, images and links.

  2. The location of the forum is given inside the container in an A tag with a class name “muut-url”. This acts as the link for search engines as well as provides the forum name for the client.

All contained HTML except the “muut-url” inside is placed on the sidebar between the forum list and online users.

Sticky posts and threads

You can put links to individual posts and threads inside the container. These are the posts/threads you specifically want to bring to attention and are often referred to as “sticky” posts/threads. When such a link is clicked the corresponding content is loaded in place (without loading the whole page), and the URL is updated accordingly.

As an example here we define 4 links:

<!-- Muut placeholder tag -->
<div class="muut">
  <a class="muut-url" href="https://muut.com/i/your_forumname">Acme forums</a>

  <!-- A custom title-->
  <div class="m-h3">Popular questions</div>

  <!-- 2 popular sticky posts  -->
  <a href="#!/setting-up:top-10-reasons-why-posts-sh/users-are-as-much-of-a-cust">Why are posts not editable?</a>
  <a href="#!/setting-up:single-sign-oni-noticed-sin/so-a-quick-explanation-of-h">How does Single Sign-On work?</a>

  <!-- 2 popular sticky threads  -->
  <a href="#!/open-word:will-moot-remain-freei-kno">Will Muut remain free?</a>
  <a href="#!/setting-up:acls-at-the-category-levelo">How will Muut ACL work?</a>

</div>

You can get the link by opening the desired thread from on your forum (click the triangle icon on the right side of the expanded post title) and then copy paste the URL “hash” from the address bar. This is the part that starts with the “#!” characters.

Muut has on an address bar

For more flexible styling options each link is wrapped inside a <p> tag and when a link is selected a “m-selected” class name is added to the <a> tag.

Custom channels

Here we define 9 channels for an imaginary forum discussing different electronic music genres. The HTML code is on the left and the resulting sidebar is on the right.

Techno channels

<div class="muut">

  <a class="muut-url" href="https://muut.com/i/electronic-music">
    Electronic music forum
  </a>

  <!-- ambient forums -->
  <div class="m-h3">Ambient</div>
  <a>Ambient house</a>
  <a>Illbient</a>
  <a>Isolationism</a>

  <!-- breakbeat forums -->
  <div class="m-h3">Breakbeat</div>
  <a>Big beat</a>
  <a>Broken beat</a>
  <a>Florida breaks</a>

  <!-- disco forums -->
  <div class="m-h3">Disco</div>
  <a>Cosmic disco</a>
  <a>Disco polo</a>
  <a>Space disco</a>

</div>

View demo »

How does it work?

  • When you add, remove, reorder or edit the anchor tags the corresponding changes are automatically sent to the server when the client is reloaded. NOTE: You need to be logged in as an administrator.

  • When channels are added manually inside the container element the “normal” channel editing on the client is removed.

  • The channel path is generated from the link text. For example “Cosmic disco” becomes /cosmic-disco. So when you change the link text it becomes a different channel. If you want to rename channels freely you can provide the path on the href attribute. For example: html<a href="#!/cosmic-disco">Cosmic sound</a>

  • You can use hierarchical paths. All posts under the channel “/ambient/ambient-house” are also found under “/ambient”. Use a path hierarchy that fits your site. Here is a demo with hierarchical paths.

  • Muut link’s href attribute begins with “#!” or is empty. When clicked, the content is loaded inside the forum and the link is selected. Other links behave normally by loading the link on the browser window. You are free to use normal links and style them as you please; perhaps combine with a nested image to make “banners” or ads.

  • Muut links are automatically wrapped inside a <p> tag and when a link is selected a “m-selected” class name is added to the <a> tag. This provides good styling options.

  • You can freely use any HTML together with the channels. Perhaps use multiple levels of nesting, add icons beside channel titles, open / collapse channels with javascript or even open an overlayed menu for each channel. Here is a demo with expandable channels.

You can still view and manage your channels on https://muut.com/your_forumname, but the changes are lost every time the the client is loaded with the custom channels.

Unlisted channels

An unlisted channel is not listed under “All posts” view. One good use case is “Issues”: you want to show the “Issues” channel on the sidebar, but don’t want these to be shown under all posts to keep things less cluttered and perhaps more positive.

An unlisted channel is marked with “unlisted” CSS class name. For example:

<a href="#!/issues" class="unlisted">Issues</a>

Any threaded commenting area, perhaps elsewhere on your site, is also an unlisted channel, so you can include any of your commenting threads on the sidebar as well; or, you can group all flat commenting areas, like blog comments, under “blog comments” channel and include that in the custom navigation.

You can place custom HTML at the bottom of the sidebar (below the online users list) with a “moot-footer” element as follows

<div class="muut">

  <a class="muut-url" href="https://muut.com/i/your_forumname">Acme forums</a>

  <!-- custom footer -->
  <div class="moot-footer">
    <a href="/a/link/to/somewhere.html">
      <img src="/an/awesome/image.png">
    </a>
  </div>

</div>

On smaller screens the footer element is shown below the forum. It is not part of the channel dropdown. This is a typical place to add advertising, polls, or forms, to name a few possibilities.

Custom bottom element

Responsive layout

On smaller screens the sidebar becomes a dropdown menu. Please check that your styling works by resizing your browser.

Custom navigation and responsive layout

Versioning

Advanced administrators, community owners, and developers may in some super rare cases may need or want to embed a specific version of Muut, or delay our automatic upgrade/update system.

We focus on making Muut backwards compatible, as well as making each new version and patch even better than the last. It is highly recommended to use the latest and up-to-date major version of Muut. (This happens automatically, when using basic embedding methods. eg. <script src="//cdn.muut.com/1/moot.min.js"></script> )

However, if you’re here, you probably already know you want to embed a specific version of your Muut community.


Versioned Embedding

Muut uses, “semantic versioning.” We know… but it’s not as complicated as it sounds! It’s a hierarchical system that tells you each step of our development process, and it’s displayed as major.minor.patch

For those uninitiated in speaking programmer, major version changes are generally incompatible with previous API (something that will usually only matter to developers). Minor version changes will add functionality but will remain backwards compatible. And patch version changes are mostly there for bug fixes.

Versioning Example (Major Minor Patch: 1.2.3)

Our embed codes use this system to mark which version is being embedded. We focus on compatibility and your Muut community won’t suddenly become incompatible with your comments or discussions disappearing when we release a new version. But developers and mega nerds might find an occasional use.

Since we use a hierarchical system for embedding Muut, it’s pretty straight forward. When you use our default embed code: <script src="//cdn.muut.com/1/moot.min.js"></script> you are sure to get the most up to date patch and minor version in that major version (1). Using <script src="//cdn.muut.com/1.12/moot.min.js"></script> would, however, assure you get the latest patch within 1.12

Take a look at your embed code and adjust the code to fit your needs. It’s certainly possible for you to embed a super specific version like <script src="//cdn.muut.com/1.12.5/moot.min.js"></script> but you might find yourself happier and more bug free to use, in this case, 1.12 instead of the specific patch number 1.12.5 Keep things broad if you can, since patches are there to fix problems, not break things.

Which version do you need?

Check out our version release page to pick the one you need. If your developer project broke after updating from 1.12 to 1.13 it’s just a process of elimination.

Configuration

The embedded Muut forums and comment sections can be further tweaked in many aspects. Each aspect corresponds to a key with a default value unless you explicitly override it in one of the following ways:

HTML attributes

Embedding options are passed to the Muut element as data- attributes, except the title option, which simply makes use of the native title attribute. For example:

<a class="muut"
  href="https://muut.com/i/community-name/comments/classical-music:bach-vs-telemann"
  title="Comments on Bach vs. Telemann"
  data-channel="Classical Music Blog"
  data-show_online="false"
  data-upload="false">
  Comments
</a>

The title attribute sets a custom title for the commenting thread, displayed when it is listed along with other threads in your forum. The data-show_online attribute determines whether the list of online users is shown on top of the comments. The data-upload attribute determines whether image uploading is enabled or disabled for users.

JavaScript

The Muut application targets <a> or <div> elements with class name “muut” for automatic installation. If you prefer installing a forum or a comment section on an arbitrary element, or initializing the client separately with different configuration options, Muut provides a JavaScript-based solution using jQuery syntax. For example, to install a Muut comment section directly on <div id="muut-custom"></div>, insert a <script/> block after the target element as follows:

<script>
  var conf = {
     url: "https://muut.com/i/community-name/comments/classical-music:bach-vs-telemann",
     title: "Comments on Bach vs. Telemann",
     channel: "Classical Music Blog",
     show_online: false,
     upload: false
  };

  $("#muut-custom").muut(conf);
</script>

Note that url is the JavaScript equivalent of href, and is mandatory. In case you don’t need other tweaking options, you may just pass the url value using the shortcut script as follows:

$("#muut-custom").muut("https://muut.com/i/community-name/comments/classical-music:bach-vs-telemann");

Reference

  • channel
  • string
  • commenting only

Specifies a custom title for the channel that contains the thread. By default this is taken from the path.

  • page_url
  • string
  • iframe embedding only

Specifies the URL of the page where Muut forum or comment section is viewed, excluding location.hash (the portion starting with #). This attribute is necessary in the scenarios where Muut must be embedded inside an iframe (as seen in certain website builders like Wix and Google Sites). Without providing this parameter, Muut can only reach the URL of the iframe instead of the main page that people actually visit, resulting in wrong links in notification emails and social media sharing.

  • share
  • true

Specifies whether sharing buttons (twitter, facebook…) are shown on the client.

  • show_online
  • true

Specifies whether the list of online users is shown.

  • show_title
  • true
  • threaded commenting only

Specifies whether individual thread titles are shown in a multi-thread comment section. When set to false, the title field will be unavailable upon creating new threads. In addition, threads are never collapsed.

  • title
  • string
  • flat commenting only

Specifies a custom title for the single thread when used for flat commenting. The title is displayed in your forum only, not on the commenting pages. By default this is taken from document.title. Do not use the data- prefix when passed as an HTML attribute.

  • upload
  • true

Specifies whether image uploading is enabled for users.

  • widget
  • false

Specifies whether the embedded Muut is in “Widget” mode. When set to true, the embedded Muut will not change the global properties of the page including document.title and location.hash.

  • api
  • object

Contains the API key, message, signature and timestamp of a signed embed.

  • login_url
  • string

In a Federated Identities setup, this is used to determine where users are sent to login from the embed.

  • autowatch
  • false

False configuration property displays a “Watch for new replies”- checkbox when replying or creating new topics. By default this is true and threads are automatically followed. On both cases users have the option to click the eye icon to follow/unfollow threads.

Signed Embeds

Your embedded forum can be signed with its own API credentials, which allows for other configuration options to be passed securely in an encoded message. For example, this is needs to be set up if you are using the SMALL plan feature Federated Identities, or for the MEDIUM feature Secure Embedding.

First, you’ll want to disable the auto-initialization of the Muut client by removing the class “muut” from the element; then we can initialize it ourselves with our own configuration options, as outlined in the JavaScript section. We’ll be passing an ‘api’ object into the configuration that contains four pieces:

  • key your API key
  • message a base64-encoded JSON object that may be empty, or contain other message data, such as for federated identities
  • signature a sha1 hash of your API secret, the message, and the current timestamp
  • timestamp the same timestamp used to generate the signature

You pass the ‘api’ object, containing those four properties, as part of the client configuration, and you’re all set.

IMPORTANT: Make sure that the message and signature are generated on your server and NOT on the frontend using simple Javascript. Otherwise your api secret will be exposed allowing anyone to make signed requests, post as anyone, and act as an administrator.

If you’re working to sign your embed and you just can’t get your code to work, reach out to us on our [forum] for any specific help!

If you use a different programming environment from the above examples we would appreciate you sending a code example to [email protected] so we can provide that along with this documentation. Thanks in advance!

Language

“There can be only one,” might be a good enough for an immortal from the planet Zeist, but it’s not always so great when it comes to language support and localization. A single language setting isn’t always enough for if you want to localize Muut on your own website, so Muut has multi-language localization support or Native Language Support (NLS) for embedded Muut communities!

If you want to display your community in only one language other than English, check out the [Default Language](/settings/#__/language) setting!_


Language Embedding and Codes

If you haven’t embedded Muut into your website yet, take a look at our embedding document for more details on how to do this. You’ll need code level access to your website. If you can’t edit the HTML of your page, many pages will allow you to “inject” snippets of code into your pages.

So, before you do anything, let’s stop and take a look at your embed code. It should look a little something like this:

<a class="muut" href="https://muut.com/i/community-name">Your Community Name</a>
    <script src="//cdn.muut.com/1/moot.min.js"></script>`

Be sure to replace community-name in our example with the community-name found on your quick embed settings page. That code makes sure it points to your community!

The embed <script src="//cdn.muut.com/1/moot.min.js"></script> will load your community’s default language (Check our our neat doc on changing the default language!). If you wanted to have a second page loclaize to, for example, Chinese, you would instead use <script src="//cdn.muut.com/1/moot.zh.min.js"></script>

It’s just a jump to the left from <moot.min.js> into <moot.zh.min.js> to get Muut in Chinese!

Muut forum with custom navigation

Adding the language shortcodes to the script embed is all it takes to localize your embedded community with Muut.

Keep in mind the best practice for localizing your community means using a localized code for each version, including your, “default.” So even if your default is English, if you’re localizing you should use <script src="//cdn.muut.com/1/moot.en.min.js"></script> for your english page.

Below you’ll find a list of all the localizations we currently support, and their shortcodes. If you don’t see the language you need, don’t fret. That list just keeps growing! (Do you want to contribute? You can contribute your own translation for a language we don’t yet support, at Github. https://github.com/muut/language )

  • Arabic (ar) <script src="//cdn.muut.com/1/moot.ar.min.js"><script>
  • Brazil Portuguese (pt) <script src="//cdn.muut.com/1/moot.pt-br.min.js"><script>
  • Bulgarian (bg) <script src="//cdn.muut.com/1/moot.bg.min.js"><script>
  • Chinese (zh) <script src="//cdn.muut.com/1/moot.zh.min.js"><script>
  • Chinese / Taiwan (tw) <script src="//cdn.muut.com/1/moot.tw.min.js"><script>
  • Danish (da) <script src="//cdn.muut.com/1/moot.da.min.js"><script>
  • Dutch (nl) <script src="//cdn.muut.com/1/moot.nl.min.js"><script>
  • English (en) <script src="//cdn.muut.com/1/moot.en.min.js"><script>
  • Finnish (fi) <script src="//cdn.muut.com/1/moot.fi.min.js"><script>
  • Farsi / Persian (fa) <script src="//cdn.muut.com/1/moot.fa.min.js"><script>
  • French (fr) <script src="//cdn.muut.com/1/moot.fr.min.js"><script>
  • German (de) <script src="//cdn.muut.com/1/moot.de.min.js"><script>
  • Hebrew (he) <script src="//cdn.muut.com/1/moot.he.min.js"><script>
  • Hungarian (hu) <script src="//cdn.muut.com/1/moot.hu.min.js"><script>
  • Indonesian (id) <script src="//cdn.muut.com/1/moot.id.min.js"><script>
  • Italian (it) <script src="//cdn.muut.com/1/moot.it.min.js"><script>
  • Japanese (ja) <script src="//cdn.muut.com/1/moot.ja.min.js"><script>
  • Korean (ko) <script src="//cdn.muut.com/1/moot.ko.min.js"><script>
  • Norwegian (no) <script src="//cdn.muut.com/1/moot.no.min.js"><script>
  • Polish (pl) <script src="//cdn.muut.com/1/moot.pl.min.js"><script>
  • Portugese (pt) <script src="//cdn.muut.com/1/moot.pt.min.js"><script>
  • Spanish (es) <script src="//cdn.muut.com/1/moot.es.min.js"><script>
  • Swedish (se) <script src="//cdn.muut.com/1/moot.se.min.js"><script>
  • Russian (ru) <script src="//cdn.muut.com/1/moot.ru.min.js"><script>
  • Tamil (ta) <script src="//cdn.muut.com/1/moot.ta.min.js"><script>
  • Turkish (tr) <script src="//cdn.muut.com/1/moot.tr.min.js"><script>
  • Ukrainian (uk) <script src="//cdn.muut.com/1/moot.uk.min.js"><script>

Custom wording

If you want to change individual words or sentences displayed in the Muut interface check out our Advanced Embedding page.

Right to left

Some languages, such as Arabic, are written from right to left.

Muut forum with custom navigation

RTL support is enabled with HTML dir attribute as follows:

<html dir="rtl">

And by using following CSS file

<link rel="stylesheet" type="text/css"
  href="//cdn.muut.com/1/rtl.css">

Styling

Designer

MINI Custom branding, saved design, and access to exclusive themes require the MINI plan or above.

You can style your hosted forum at muut.com/[community-name] using the Muut Designer, as well as add your own logo and brand color to email notifications, indexed SEO pages, and authentication dialogues.

Custom branding

Muut Designer is a sidebar with a wide range of controls for styling your forum, available while logged in as an administrator.

Click on the Designer item in the sidebar navigation under the MANAGE section to open the sidebar; then make your customizations under THEME, OPTIONS, COLORS, and TYPOGRAPHY.

Muut Designer UI

After making your changes you can publish them at muut.com/[community-name] by clicking “Save changes” at the bottom of the sidebar (Requires the MINI plan or above). Alternatively you can get the generated CSS styling code and paste it on your own website (free).

Muut hosted forum

By clicking <>Embed on the Designer you will receive the code to embed the forum on your own webpage using the current design. It will not be saved on the hosted forum at muut.com/[community-name], unless you click “Save changes”.

Muut theme thumbs

Subscribers to the MINI plan or above also get access to an ever-growing array of themes to use either as is, or as a starting point towards your own unique design.

Logo and Colors

With the MINI plan or above, you will be able to add your own logo and brand color to:

  1. Email notifications,
  2. Email confirmations (new user, email change, password change),
  3. Authentication dialogue and
  4. Static SEO pages

These areas are not part of your page and cannot be styled with CSS.

Administrators can customize branding directly from the forums by clicking “Settings” link from the forum sidebar.

For the logo, any typical picture format supported by modern browsers (JPG, GIF, PNG) will work. One good option is to use a PNG file with transparency, so your given background color will neatly show through without fringing (GIF) or a color block (JPEG). Other options are to tune the background to the same color as in your picture, or just ignore this and to deliberately have a rectangular frame around the logo.

Maximum dimensions for the logo are 360×64px.

Brand color

Choose a background color for the headers. This is expressed as a HEX value.

Brand name

Enter your brand name to be shown on the notification emails. This is the sender’s name.

Upload a banner image to be featured directly on your hosted forum, without any manual embedding work. The optimal pixel size of the banner image is 720 x 200.

CSS

Once you have embedded Muut on your page it is like any other DOM element; completely styleable with standard CSS. The styling can be placed inside the STYLE tag on the HEAD section of your page, or you can use an external CSS file.

In the below example we’re linking to a Google Web Font family “Arvo” and an external .css file called “mystyle.css” (in the same directory as the .html file into which Muut is embedded).

<link href='http://fonts.googleapis.com/css?family=Arvo'
  rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="mystyle.css"/>

Here’s a sample of what the contents of a simple mystyle.css file might look like:

body {
  font-family: "Arvo", serif;
  margin: 0; padding: 0;
  background-color: #fafafa;
}

.muut .m-seed .m-facelink, .muut .m-header .m-selected {
  background-color: #fafafa;
}

The above css changes the default font family to “Arvo” (which we pre-loaded in the earlier) and the background color to a light gray.

We recommend you to start from a minimal forum, commenting or threaded commenting setup and iteratively add your own CSS rules, one by one. This is easier and safer than to place Muut on a page with a lot of existing CSS rules.

Typography

Muut inherits your page’s font and should play well with many different typefaces. Both serif (e.g. Times, Georgia) and sans-serif (e.g. Arial, Verdana) style fonts work well for the body text, whereas display style fonts (e.g. Impact, Arial Black, if not Comic Sans) can work for headings. Fixed-width fonts (such as Courier) are well-suited for the syntax highlighted code sections.

You shouldn’t feel restricted by the traditional web font selection, however; with the advent of character antialiasing techniques in modern browsers and high-resolution screens in many mobile as well as desktop devices, the requirement for specially adjusted-for-web (“hinted”) typefaces is rapidly vanishing, and companies and sites like Adobe, Google, Linotype, Open Font Library, Emigre, and many others are offering vast libraries of interesting alternatives to the plain vanilla selection of typefaces that we’ve all grown accustomed to (and bored ourselves with) in the last 15 years of internet. Be creative — but also remember to keep things readable.

Muut and typography

Muut respects the global font-size setting. If you change the base font size as follows

body { font-size: 18px }

Muut will change its overall sizing accordingly. Font size, margins, paddings and even graphics are automatically resized. Try it!. If you only need to resize the Muut element and not the surrounding page you can simply do:

.muut { font-size: 18px }

Dark background

For pages with a dark background there are extra CSS classes that you can add to the root element:

  • md-dark-header for a dark header
  • md-dark-topic for dark topics
  • md-dark-sidebar for a dark sidebar
  • md-dark-page for a dark page, which is the area beside the sidebar

These classes will invert the foreground color scheme so that it’s better suited for dark background colors.

Dark background

Custom colors

You can easily change the default Muut theme by modifying the background color of the header or the sidebar. Here is a quick peek:

Colored Muut forum

Here is the commented CSS file for the above demo. The most relevant parts:

/*  Muut header with dark background color  */
.m-header {
  background-color: #005b97
}

/*  Light main links on dark background  */
.m-navi a, .m-nav-account span {
  color: #ddd
}
.m-navi a:hover, .m-nav-account span:hover {
  color: #fff
}
.m-navi a.m-selected, .m-nav-account span.m-selected {
  color: #333 !important
}

/*  Dark sidebar. Absolutely positioned on top right  */
@media (min-width: 980px) {

  .m-sidebar {
    background: #002741;
    margin-top: -1.2em;
    padding-top: 2em;
  }

}

Custom background color

If you have a custom background color under the Muut application then following CSS will make change applicable parts in Muut accordingly:

.muut .m-header .m-selected {
  /* your custom color goes here */
  background-color: #eee;
}

“Reserved” colors

Muut is mostly grayscale and uses colors sparingly as follows:

  1. blue for actions: links and buttons
  2. pink for personal stuff: likes and replies
  3. red for unread messages
  4. green is used for online status

As Muut is being used across numerous websites, users may already be familiar with these colors; changing these is not recommended, especially unread (3) or online status (4) colors.

Troubleshooting

Muut uses only class selectors and never ID selectors; this is important to remember. If Muut is installed inside an element with id “content” and you have following CSS setting:

#content h2 { line-height: 2 }

then all H2 tags inside Muut have the line-height settings no matter what. Settings on ID selectors always override settings in class selectors. This can break Muut styling. You should try to reduce external CSS declarations to a minimum and use only Muut’s own CSS settings.

Most CSS frameworks, such as Twitter Bootstrap, use class selectors only, so you won’t run into trouble.

Muut & Twitter Bootstrap

Debugging

The best tool for styling is a DOM inspector such as Chrome Debugger or Firebug. Right click any element in Muut and choose “Inspect element” and you’ll see something like this:

Muut sidebar in Chrome debugger

You’ll see that Muut prefixes all CSS class names with “m-“. The purpose of this prefix is to avoid conflicts with other parts of the site.

Note Muut CSS has changed, and possibly will change, considerably while still in beta phase. To preserve your custom styling against future Muut changes, it is recommended that you first load the default moot.css, and then override with your own; this way, you can easily check which parts of the custom CSS are causing possible conflicts by removing and re-introducing styles one by one.

Administration

Settings

Administration happens trough settings that you can access from the forum sidebar:

You are greeted with following options:

Channels

After the forum has been setup and the initial channels (at least one) have been created, it is possible to add new channels, edit the names of the existing ones, reorder them, and delete them.

Settings > Channels

Reorder channels

You can reorder channels by dragging and dropping them into desired positions. The positions have no effect in how the channel views, posts inside channels, “All posts” or “My feed” views are handled.

Rename channels

You can rename the channels in the navigation by clicking on the channel title, typing in the new name, and either pressing enter or clicking outside the navigation. In order to retain the validity of permalinks, i.e. links to individual threads, the path for the renamed channel stays unchanged. For example, the web address muut.com/[forumname]#!/cows#what-color-cows-are-your-fa will stay the same even if you change the channel name from “Cows” to “Ruminants”. In effect, you are renaming the link text of the channel, but not its URL.

Delete channels

Channels can be deleted by clicking the little grey “X” on the right side of the channel name. This won’t delete the posts inside the channel, however; it simply removes the channel from the right navigation and therefore also stops threads within the channel from showing in the All Posts view.

After you’ve done changes any of the above changes, save them by clicking “done”.

Spam

Posts that are marked as spam are shown here for permanent deletion or un-spamming. The Spam view is visible only to the moderators of a forum.

You can disable automated spam filtering by selecting Disable Akismet from the Spam page of your community’s settings.

Administrators

MINI Multiple administrators requires the MINI plan or above.

As an administrator you can promote other users to administrators as well. Administrators can change Muut settings, remove posts, manage spam, and ban users. Only the forum creator/owner, namely the first administrator, deals with account and billing matters.

Add administrators by their username, as well as removing existing administrators from the list.

Administrators

Moderators

SMALL Moderators requires the SMALL plan or above.

As an administrator you can also promote users to moderators instead of full administrators. Moderators can remove posts, manage spam, and ban users, but do not have access to Muut settings.

Member only access

MEDIUM Member only access requires the MEDIUM plan or above.

With Muut’s complete user access control, it is no longer a hassle to create a private, member only access community for both forum and commenting. Once you set your community to private, users who want to view and participate must submit a membership request first.

Request membership

As moderators you will see all the access requests in the Private community page and decide whether to accept or reject each individual user.

Private community

The access control rules are always preserved even if you switch your community back to public.

Banned users

Moderators can ban users of ill behavior from their profile page. Banned users are listed in the Banned panel of the forum Settings, where moderators can manually add more users to the list, remove users from the list, and adjust the duration of banning for each user.

Banned users

Custom domain

SMALL Custom domain requires the SMALL plan or above.

You can use a primary domain www.mydomain.com, “naked” domain mydomain.com (no “www”) or a subdomain muut.mydomain.com. An “alternate” domain allows your community to be reached from a second location or domain. If you intend on using a primary domain with the “www” prefix then you’ll need to add both www.mydomain.com and mydomain.com. You’ll need to change one or two settings on your domain to keep everything talking, though. Typically you’ll do this at the third-party website where you registered your domain (like Network Solutions & GoDaddy).

Custom domain

Log into your domain registrar’s site. You should be able to find your DNS settings in a section labeled something to the extent of DNS Manager or, “Zone File Settings.”

Here you should be able to create the “records” you need to make your domain talk to your Muut community.

NOTE Do not add http:// or https:// to the records below. Doing so will break the space-time continuum. And your website.

Subomains (such as muut.mydomain.com):

Your DNS Manager should have a section allowing you to edit CNAME Records or simply, “Add Record.” The subdomain you’ve chosen belongs in the “Alias / Host Name” category. So if you wanted users to find your community when they typed in muut.mydomain.com then in “Alias / Host Name” you would type muut. Follow the table below for the rest of your CNAME Record settings

Records / Record Type Alias / Host Name Points to
CNAME [subdomain] hosted.muut.com

“Naked” Domains (such as mydomain.com):

Your DNS Manager should have a section allowing you to edit A Records or simply, “Add Record.” Use the A Record (aka Host Record) settings below to allow visitors that type your domain to find your community.

Records / Record Type Alias / Host Name Points to
A @ 54.165.174.157

Primary Domains (such as www.mydomain.com):

The dream of the 90’s is alive at Muut. So, we totally get why you just gotta have the “www” prefixed to your domain. You’ll want to add a CNAME Record in your DNS Manager in addition to an A Record (just like a naked domain).

Records / Record Type Alias / Host Name Points to
A @ 54.165.174.157
CNAME www hosted.muut.com

Federated identity

SMALL Federated identity requires the SMALL plan or above.

Federated Identities allows an already existing website’s user authentication system to be used rather than Muut Accounts for users to post in a given community. That process is completely transparent to the user, so if they are logged into your site, they can post in the Muut forum—no separate login whatsoever.

You provide the user information when the Muut client is initialized and we simply trust and use that info; the username, display name, avatar etc. are completely in your control. This is done by extending the standard signed embed code to include the user data:

You can see that is an extension of the code for signed embeds in which we have added the user data to the message generation.

The user object supports following properties:

  • id identifies the user—this should be the way that your website uniquely identifies the user, like the username or id number. Required
  • displayname is the full name. Required
  • email is the user’s email address (optional, for post notifications)
  • avatar is an absolute URL to the user’s profile image (optional)
  • is_admin where true gives administrative rights. (optional)

Once those are assigned, you pass that user object into the message before it gets encoded and signed; if those values are good to go, the user is authenticated and can post to the forum.

If a user is not currently logged into your website, you should pass an empty user object { user: {} } into the message.

You can pass a login_url property into the configuration. The login_url will be where the user is directed, rather than the Muut Account popup, when they click on a post or reply text field, or the “Log In” link at the top of the embed. It is automatically appended with the Muut client path hash to open the proper location in the forum after login. So, the client configuration object would look something like:

var conf = {
    login_url: 'http://mywebsite.com/login/',
    api: {
        key: 'yourApiKey',
        message: 'signedEmbedMessage',
        signature: 'signedEmbedSignature',
        timestamp: signedEmbedTimestamp
    }
};

The client initialization documentation has details on using a configuration object to initialize the embed client. With the attached hash, if the user was visiting a specific path of the forum before clicking login, the URL the user is taken to might look like http://mywebsite.com/login/#!/mycat:topic-id, where the hash represents the path the user was on in the forum.

You can also add url_escape: true configuration option to escape the login URL (URL encoded), so the above example would look like:

http://mywebsite.com/login/?redirect_to=https%3A%2F%2Fmydomain.com%2Fforum%2F%23%21%2Fmycat%3Atopic-id

Example

Here is an insecure demo that generates the values on the client-side with JavaScript. It is an example ONLY. As we warn on the signed embeds instructions, NEVER generate the Federatied Identities message and signature on the client-side. Always generate the values on the server. Your secret key should not be seen by anyone. If people get access to your secret key then they can sign any request and authenticate as anyone they want. Anyone could post as any user, administrator or otherwise.

Single sign-on

The feature previously known as Single sign-on (SSO) has been renamed to Federated identity (FedID) to better reflect the nature of the feature. Please refer to the corresponding documentation here for setup instructions.

Secure embedding

MEDIUM Secure embedding requires the MEDIUM plan or above.

Need to restrict Muut embedding from unauthorized users? With Secure embedding enabled, you can rest assured that no one else can embed your Muut forum or commenting sections on third-party websites. This restriction is achieved by exclusively allowing only signed embedding of Muut, that is, Muut embedding works only if it is signed with your private key. Further you have options to put Muut behind a password protected page and you get complete privacy.

Head over to the signed embeds section to see how you can do this on your website. Once you have done that, visit your community settings to enable the secure embedding feature:

Enable secure embedding

Note You should enable this setting on your forum only if signed embedding is already set up successfully; otherwise you would not be able to access your forum after enabling Secure embedding.

Here are demos for private forum and private commenting.

Webhooks

SMALL Webhooks requires the SMALL plan or above.

Muut Webhooks are HTTP callbacks triggered by Muut events. They communicate with external web servers using POST requests in JSON format. Webhooks enable you to send custom event notifications to specified services (e.g. Twitter, Asana, or your own creation), which in turn trigger their own actions.

Muut events

Webhooks are configured to fire a notification upon the occurrence of one or more Muut events.

Webhooks UI

The available events are as follows:

  • post A new thread (with seed post) is created
  • reply A reply is made to an existing thread
  • remove A post or thread is removed
  • like A post or thread is liked
  • unlike A post or thread is unliked
  • spam A post or thread is marked as spam
  • unspam A post or thread is unmarked as spam
  • enter A user goes online
  • leave A user goes offline

HTTP request specification

When a Muut event of interest occurs, the Webhook sends a corresponding POST request to the service indicated in the URL field. The HTTP header and message body (payload) of the POST request are specified as follows:

HTTP Header

The POST requests sent to the servers contain the following special HTTP header fields:

  • X-Muut-Forum The unique Muut forum name
  • X-Muut-Signature The HMAC of the payload using the Webhook’s secret as the key. Only present if secret is provided.

Payload

The payload of the POST request is in JSON, the native format used throughout the Muut architecture for communication / notification. The specific structure for different Muut event types are illustrated below.

User object
{
  "displayname": "John Doe",
  "img": "//domain.com/path/to/image.jpg",
  "path": "@johndoe"
}
Post
[
  "post", // name of the event
  {
   "path": "/goma/galleries:this-is-a-thread", // path to the thread
   "page": { "title": "Exhibitions" } // title of a channel
  },
  {
   "title": "This is a new reply", // title of the thread
   "body": [ "Head of the post", "Tail of the post"],
   "user": USER OBJECT
  }
]
Reply
[
  "reply", // event name
  "/goma/galleries:bar", // path to the thread
  {
   "body": [ "Head of the post", "Tail of the post"],
   "key": "some-reply", // reply key
   "user": USER OBJECT
  }
]
Like / unlike / spam / unspam / remove
[
  "like", // or any of "unlike", "spam", "unspam", "remove"
  "/goma/galleries:this-is-a-thread/some-reply", // path to target of action
  USER OBJECT
]
Enter / leave
[
  "enter", // or "leave"
  USER OBJECT
]

Development tools

To increase productivity in Webhooks development, you can make use of web services to which HTTP requests can be sent in order for you to inspect and debug efficiently. The services that we find useful are listed here for your reference.

RequestBin

Custom S3 Bucket

SMALL Custom S3 Bucket requires the SMALL plan or above.

You can store the discussion to your own S3 bucket and make search engines crawl the content under your own domain. Also good for backup. Here’s how you provide your bucket name:

Settings > Custom S3

Then you need to have a matching S3 bucket on Amazon with write permissions. Here’s how add one:

  1. Login to your AWS management console
  2. Click S3. Find your bucket or create a new bucket to the US standard region.
  3. Right-click to bucket properties
  4. Click Permissions from the right
  5. Click “Add more permissions”
  6. Add “[email protected]” to the Grantee field and enable “Upload / Delete” checkbox

Without the permission we won’t have access to drop anything there!

Proxy Content From Your Bucket

Now you will have the ability to proxy static content through your S3 bucket instead of muut.com/i/, thus allowing you to disable indexing at muut.com so the content will only be indexed at your domain.

You will first have to set up the S3 bucket to be publicly accessible as statically hosted content. Under the Permissions section of your bucket’s Porperties, click Add bucket policy. In the text field that opens, enter the following code block, but with your bucket name substituted:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOURBUCKETNAME/*"
        }
    ]
}

Save the policy, and then in the Static Website Hosting section of your bucket’s Properties, select Enable website hosting and enter your community name in the “Index Document” field (this will only be possible after the static indexes have been generated on your bucket at lease once). Then Save the setting and if you then visit your bucket’s publicly accessible URL (YOURBUCKETNAME.s3-website-us-east-1.amazonaws.com) you will see the index of your forum’s static content. Note that clicking the links will not function properly when accessed this way—that is OK.

The final step is to set up the proxy from your website’s server. You can see instructions on how to do that for Nginx and Apache servers in the SEO Custom Domain Configuration section of our SEO docs. In the examples, you simply have to replace http://muut.com/i with your S3 bucket’s public URL. Note that the /m proxy rules must remain pointing to https://muut.com/m.

Now search engines will find the static version of the discussion under your domain and you are better ranked. There is also an option to improve SEO further to disable indexing under muut.com so that if you have a custom bucket the content is not present in both locations.

SEO

Search Engine Optimization (SEO) means that in addition to the content on your pages being visible to search engines (search engine compatibility), it appears as high as possible in the results pages. In Muut, this is achieved by generating an hourly static dump of the discussion in the form of a specifically formatted webpage, which, to search engines, is the only page in the web that includes that discussion content.

When you click a Muut search result from Google, Bing, Yahoo etc. you’ll see something like this:

SEO version

That’s a static, read-only page specifically designed for search engines. They will rank the content high because:

  1. The HTML is specifically formatted for search engines using simple syntax and microformats.

  2. This is a simple, low tech solution with no tricks – just the raw content.

  3. The content is updated hourly

  4. There is no duplicate content; the discussion on the static dump is not present on any other page as far as search engines are concerned.

To achieve some kind of search engine compatibility, many dynamic JavaScript applications place a static version of the content inside a noscript tag on the same page. However, search engines don’t rank pages using this solution particularly high, if at all. On top of that, search sites such as Google particularly advise against doing this. Others rely on experimental iframe indexing which is highly unreliable and really only sometimes works with Google.

Directing users to your site

The static content has a prominent “Open full view…” button on top/right. It’s pushes users to the actual forums on your site. The button stays in place even when the page is scrolled down.

Since the same discussion can be embedded into multiple domains anywhere in the world you need to tell us the primary site where users should be forwarded from the search results. This can be done directly from the forums by clicking “Settings” link from the right (only visible for administrators). It will open a dialog asking for a forum URL:

SEO settings

The URL is a full path to your forums. When you copy paste that URL into your browser the forums should be opened.

There is also an input for Google Analytics tracking code which is used by the static index. The changes are updated on the index pages within the hour. This input also enables analytics on the forum and commenting instances.

Custom domain configuration

By default, and to work with zero configuration, the static pages reside on Muut’s servers. To get the benefit of increased page rank on search engines, you can serve the the content from your own domain. First you need to change URL on the Muut placeholder tag.

For example, change

<!-- Static content on Muut servers -->
<a class="muut" href="https://muut.com/i/your_forumname">
  Acme forums
</a>

to

<!-- Static content on your servers -->
<a class="muut" href="/i/your_forumname">
  Acme forums
</a>

Next you need to configure your webserver to serve this content from muut.com.

Nginx configuration

server {
  listen 80;
  server_name domain.com;

  # Muut configuration (this location block only)
  location ~* ^/i/ {
    proxy_pass https://muut.com;
    # OR your S3 bucket URL
  }
  location ~* ^/m/ {
    proxy_pass https://muut.com;
  }

}

Apache virtual host configuration

# Load these modules if not currently loaded
LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
LoadModule ssl_module /usr/lib/apache2/modules/mod_ssl.so

<VirtualHost *:80>
  # Add this to your VirtualHost
  SSLProxyEngine On
  ProxyPass /i https://muut.com/i
  ProxyPassReverse /i https://muut.com/i
  # OR your S3 bucket URL (no /i on the end)
  ProxyPass /m https://muut.com/m
  ProxyPassReverse /m https://muut.com/m
</VirtualHost>

Apache .htaccess configuration

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^i/(your-community-name)(/.*)?$ http://muut.com/i/$1$2 [P]
  # OR your S3 bucket URL (no /i in the middle)
  RewriteRule ^m/(.*)$ http://muut.com/m/$1 [P]
</IfModule>

IIS 7 Web Server web.config

<rewrite>
  <rules>
    <rule name="Muut Index Rewrite" stopProcessing="true">
      <match url="^i/(.*)" />
      <action type="Rewrite" url="https://muut.com/i/{R:1}" />
    </rule>
    <rule name="Muut Media Rewrite" stopProcessing="true">
      <match url="^m/(.*)" />
      <action type="Rewrite" url="https://muut.com/m/{R:1}" />
    </rule>  
  </rules>
</rewrite>

The /m path is used for loading styles and scripts so this allows you to customize the styling as well.

Note that you can also proxy the static index content through a Custom S3 Bucket bucket to have the it available under your own domain instead of muut.com/i/. Note the lines in the above examples where that possible substitution is pointed out.

If you have a working configuration for a different web server such as IIS or Lighttpd, please be kind and send it to [email protected]. Thank you!

Google Analytics

MINI Google Analytics requires the MINI plan or above.

Summary view

<b>Summary</b> • Everything with a single view

Timeline

<b>Trends</b> • Loads, new posts, logins and likes

Realtime events

<b>Realtime</b> • View events as they happen

Setting up

Muut Analytics is based on the wildly customizable Google Analytics. The data is automatically tracked to your Analytics account after providing your Analytics ID from the settings:

SEO settings

The client will automatically load the tracking script from //google-analytics.com/ga.js if it’s not already included on your page with a <script> tag.

Click the following link to install Muut Analytics dashboard to your Account.

Install Muut Analytics v1.0.1

Feel free to poke around in the Events section and once you find an interesting graph you can simply add it into your newly created dashboard.

For realtime events click Real-Time > Events from the left. For deep analysis of the events click Behavior > Events > Overview

Weekly email report

Hit the Email link on top of the summary view for email report of the data. You’ll get the whole summary view to your inbox. Sometimes that’s all you need.

Event tracking

Muut client is a single-page application built to be real-time, hence event tracking is more pertinent than pageview statistics as most user activities do not involve any page request.

Muut uses Google Analytics _trackEvent() method to gauge various user interactions with the Muut application. In particular, three parameters are passed to the method:

_trackEvent(category, action, label)

The category parameter specifies the type of events to be tracked. There are 4 channels defined as follows:

  • Moot: load tracks instances of entering a specific “view” within the Muut client, e.g. the full view of a thread, a channel, or search result.

  • Moot: login tracks user logins.

  • Moot: post tracks submissions of posts, including replies.

  • Moot: topic tracks click-views of a particular topic, aka. thread.

The action parameter is used as an identifier of the specific content involved in the triggered event. This can be the title of a single thread, the name of a channel (including the built-in aggregator “All Posts”), as well as a search keyword.

The label parameter specifies the @username that is responsible for the triggered event. Visitors who are not logged in are given the label anonymous.

For example, _trackEvent("Moot: load", "Setting Up", "@tipiirai") tracks instances of the user @tipiirai entering the forum channel named Setting up.

Integrations

Slack is a team collaboration tool. Like Muut, Slack is real-time, grouped by channels, and text-focused. It also allows you to direct message team members, share files, and search conversations. Muut integrates with Slack enabling you to keep your team up-to-date on your community activity.

You can access the Slack integration options from the Settings. The integration offers the following options:

  • Send new posts to any Slack channel or user
  • Send new replies to any Slack channel or user
  • Reply to conversations on Muut directly from Slack
  • Track Likes and Replies of posts
  • Send reminders when posts go unanswered

By adding a slash command integration on Slack you can reply directly to posts on your Muut forum or comments. Each incoming message receives a unique 3 character id that you can reply to. By simply typing /reply tid: The message to the user you can respond to a message identified by tid.

Slack integration is part of the Muut MEDIUM plan.

Setting up Slack

Go to following URL with your own forum name:

https://slack.muut.com/?forum=type-your-forum-name-here

You need to be the owner of the forum with Medium plan. You can try the feature for free for 14 days without credit card.

WordPress Installation

NOTE Find full documentation for the Muut for Wordpress plugin here.

Our WordPress plugin makes it easy to get Muut working on your website in just a few steps.

Create a Muut community

The first step to using any plugin or Muut community is to create a Muut community. - Captain Obvious.

  1. If you would like to use a new community for your WordPress page head to muut.com or your account page to create a community.

  2. If you have an existing community you’d like to use open your community on Muut.com — you can do this through your account page.

Automatic Install

Muut for Wordpress can be automatically installed directly from your WordPress administrator dashboard using the WordPress.

  1. Go to Plugins > Add New.

  2. Type “Muut” into Search Plugins box.

  3. Your search results should show our Muut Plugin.

    1. Click Details for more information.

    2. Click Install Now to install.

  4. The resulting installation screen will list the installation as successful or note any problems during the install.

  5. If successful, click Activate Plugin to activate it

Manual Install

The manual install is a special case scenario and is not recommended for most users.

Initial Configuration

Settings

Once installed, select Muut from the sidebar of your WordPress dashboard. Before Muut is useable you must enter your forum name on this page — be sure to hit save. If you plan on using Muut for commenting on your WordPress pages and/or blogs be sure to select the box saying you wanted to use Muut for commenting.

Check out what you can do with the Muut for Wordpress plugin add a new page. You’ll see that there are three tabs (or two, if you haven’t enabled Use muut for post commenting):

  • Commenting: This tab can be used to set up Muut commenting on the page (or post). It is the only tab that is visible on all post types (not just pages).

  • Channel: This tab is used to embed a single channel at this location. It acts like Channels on the main forum, but the forum’s navigation is not visible. It will generate the channel path and name by default, based on the page slug, or you can enter a custom channel path if you want to embed an existing one, for example.

  • Forum: By using this tab, you will embed the full Muut forum using the rich user interface, which also allows a truly customizable look and feel using CSS.

The Channel and Forum tabs are only available on pages (not blog posts, or other post types). The Commenting tab, however, is accessible on all post types. More details about the available tabs is contained further in this document.

You can find further information on the Muut settings page in our Muut for Wordpress documentation.

WordPress Documentation

NOTE Easy installation instructions are found on this page.

Modern forums and commenting for the popular blogging platform.

Whether you’re setting up for the first time or have just updated to the new version of the plugin, you’re going to love what we’ve done to make implementing Muut in your WordPress website easy and flexible. You can visit our plugin page at the main wordpress.org repository here.

Full blown forums for wordpress

Full blown forums

Realtime commenting for wordpress

Realtime commenting

Benefits

  • Unified system for both forums and commenting. Same users and design
  • Full featured forums makes your WordPress site conversational
  • Flat or threaded commenting for small or big topics
  • Skinnable style the discussion directly from the WordPress CSS editor
  • Realtime. No page reloads – posts, replies, likes and users appear in realtime
  • Focus on content. Text focused, uncluttered and linear user interface
  • Single Sign-On. Use the WordPress login, users and avatars
  • Search engine optimized. Improve your ranking with user generated content
  • Spam filtering, email notifications and 20+ different language versions

Setup

Settings

If you have already have a Muut forum, you can enter your forum name on the settings page right away. If not, you’ll have to set up a new forum at the Muut website first.

Once you have saved your forum, you can edit the other various settings for your implementation and, you can go ahead and add a new page. You’ll see that there are three tabs (or two, if you did not enable Use muut for post commenting):

  • Commenting: This tab can be used to set up Muut commenting on the page (or post). It is the only tab that is visible on all post types (not just pages).

  • Channel: This tab is used to embed a single channel at this location. It acts like Channels on the main forum, but the forum’s navigation is not visible. It will generate the channel path and name by default, based on the page slug, or you can enter a custom channel path if you want to embed an existing one, for example.

  • Forum: By using this tab, you will embed the full Muut forum using the rich user interface, which also allows a truly customizable look and feel using CSS.

The Channel and Forum tabs are only available on pages (not blog posts, or other post types). The Commenting tab, however, is accessible on all post types. More details about the available tabs is contained further in this document.

If you’re on the Mini plan or above, you can use the Muut Designer tool (accessed from the full forum view when logged in as the administrator) to globally change Muut’s appearance.

Settings

  • Forum name: muut.com/___

  • Language This is the language for all the Muut embeds. The plugin itself uses the language set for your entire WordPress website. Not seeing your language? Find out how to provide it yourself here!

Commenting

  • Use Muut for post commenting Replaces default Wordpress commenting.

  • Use Muut commenting on posts with existing comments Posts that already have comments using the default WordPress discussion system will not default to using Muut. This can be changed on a post-by-post bases using the Commenting tab in the Muut metabox for that post.

Seach engine optimization (SEO)

  • Allow search engines to crawl discussions at - This setting should generally not be touched. When checked, it allows search engines to index your discussions under your domain as well.

  • Serve from your own S3 Bucket - If you are on the Small plan or above and have set up a custom S3 Bucket for your Muut forum, you can serve content directly from that bucket rather than from muut.com. Once enabled, the bucket name you enter must be the same S3 bucket registered for the forum in the Muut settings.

Signed Setup

If you have a Small or Medium subscription and are using Federated Identities (SMALL) or Secure Embedding (MEDIUM), you need to enable signed embedding by entering your API credentials in this section. You can get the API keys directly from the forum frontend (either on your embed or at muut.com) by clicking the “Settings” link and copying the API Key and Secret Key from the top bar.

This is not required if you are not using one of the premium services dependent on it.

Federated Identities

Federated Identities (formerly called “Single Sign-On” or “SSO”) lets you use WordPress registration and login instead of Muut’s. For this to work you need to upgrade your forum to support Federated Identites with the SMALL or MEDIUM subscription and then follow the instructions for the Signed Setup.

Once enabled, Federated Identities will be used on all the forum and commenting instances created by this plugin.

Individual Pages and Posts

Meta box

The primary controls for the Muut embed on a given page or post are controlled in the Muut metabox in the right column. If you do not see the Muut metabox, make sure Muut is enabled in the Screen Options dropdown for that post editor. Below are the notes for the three tabs available.

Commenting

  • Enable Muut commenting Check this to enable Muut commenting for the page or post. If on a page, it will deactivate the other two tabs.

  • Flat commenting A commenting section where all the posts appear in a single thread and will be listed in chronological order from top to bottom.

  • Threaded commenting A commenting section where top level comments can have one level of replies. The threads with the newest replies appear on top.

  • Disable image uploads Linking to external images is still possible when uploads are disabled. Images are always displayed in gallery view.

Channel

  • Enable channel (a standalone discussion area) Check this to enable a standalone Muut channel embed for the page. This will deactivate the other two tabs.

  • Hide online users Hides the “Online users” section. Online status (green dot) is still shown in the avatars for users who didn’t hide it.

  • Disable image uploads Linking to external images is still possible when uploads are disabled. Images are always displayed in gallery view.

Forum

  • Enable forum Check this to enable the embed for the full Muut forum. It includes Muut’s rich interface that is completely customizable with CSS.

  • Hide online users Hides the “Online users” section. Online status (green dot) is still shown in the avatars for users who didn’t hide it.

  • Disable image uploads Linking to external images is still possible when uploads are disabled. Images are always displayed in gallery view.

  • Show Comments Shows a channel called Comments at the bottom of the forum navigation that contains every active commenting section from posts and pages on the website. Comment threads that a user participated in or watched will always show up in her personal “My feed” regardless of this setting.

Advanced Customization

The Muut WordPress plugin was designed with extensibility in mind. Following from that are a bunch of template tags, the ability to execute a template override for the forum page or commenting embeds along with many actions and filters available to be hooked into. Below is an outline of some of those advanced features.

Template Overrides

In the current version, there are two templates available to override, one for the comments embed and another for the Forum page embed. All the templates that you override will need to be placed in a new muut directory located in your theme root (wp-content/themes/my-theme/muut/)

Forum Page

By default, the page containing your main forum embed (the one that uses the Forum meta box tab) uses a custom template packaged with the plugin (wp-content/plugins/muut/templates/forum-page.php). If you would like to customize or completely redo that template, place a file “forum-page.php” within your theme’s muut directory (the one you created, per above); you could even copy and paste our version as a starting point!

The most important template tags you’ll be using to create that template override are muut_is_forum_page(), to ensure that it is the forum page currently loading the template, and muut_page_embed() to place the actual Muut embed within your new template.

Commenting Block

When a post has Muut commenting enabled (using the Commenting meta box tab), it uses our basic commenting template located at (wp-content/plugins/muut/templates/comments.php). If you would like to alter or replace that template, you need only drop a file comments.php in the muut directory you created within your theme. The template tag you will need to make sure you use to embed the Muut commenting properly is muut_comments_override_anchor().

Template Tags

You can take a look at all of our currently available template tags in the public directory of the plugin (wp-content/plugins/muut/public). Here are a few to take special note of.

  • muut_get_forum_name(): Retrieves the Muut remote forum name.
  • muut_post_uses_muut( [$post_id] ): Checks if a given post uses Muut (channel embed, forum, or commenting).
  • muut_is_forum_page( [$page_id] ): Checks if a given page is the main forum page.
  • muut_get_forum_page_id(): Gets the page ID of the page set as the main forum page.
  • muut_is_channel_page( [$page_id] ): Checks if a given page is a channel embed page.
  • muut_is_forum_page( [$page_id] ): Checks if a given page is the main forum page.
  • muut_uses_muut_commenting( [$post_id] ): Checks if a given post uses Muut commenting.

Actions and Filters

We’ve made sure to include and use many actions and filters with the latest version of the plugin to ensure maximum customizability and extensibility by us and other community developers. Feel free to peruse the plugin code to look for the actions and filters we use (just do a search for apply_filters or do_action within the plugin files. A few you might want to take note of to begin with, however, are listed below.

Filters

  • muut_do_not_load_metabox_for_post_types (Array) - An array of post type names that the Muut metabox should be disabled for.

  • muut_show_title_on_forum_page (Boolean) - Defaults to false, if set to true, it will show the WordPress page title on the main forum embed page.

  • muut_do_not_fetch_post_counts (Boolean) - Defaults to false, if set to true, your website will not make external requests to the Muut API to get comment counts for posts using Muut commenting.

  • muut_show_channel_tab_channel_path_field (Boolean) - Defaults to false, if set to true, a channel path field will show on the Channel tab in the page editor to specify a custom Muut path.

  • muut_show_channel_widget_channel_path_field (Boolean) - Defaults to false, similar to the one just above this: if set to true, a channel path field will show on the Channel widget settings to specify a custom Muut path.

  • muut_use_packaged_forum_template (Boolean) - Defaults to true, try setting it to false if your footer or sidebars seem forced out of place or misaligned on your main Forum Page.

  • Many more! Just check out the code or ask on our forum. Definitely let us know if there is one we are not using that would be helpful so that we can add it in a future release.

Actions

  • muut_forum_custom_navigation - Runs at the bottom of the main Muut forum navigation. You can output your own Markup at this point following the instructions in the Muut documents above custom navigation to see your options.
  • Quite a few more. Again, check out our code and let us know on our forum if you have any questions or suggestions for actions in future releases.

Widgets

The Muut plugin for WordPress offers widgets that display various forum/commenting information in real-time. You can easily add them to your theme via Appearance > Widgets. All the Muut widgets start with “Muut” in their name.

  • Latest Comments

This widget depends on features in the Small plan… which are awesome. The Latest Comments widget keeps track of which posts have received the latest comments and who made them, and all the users on your website can see it update on the fly as they participate in the discussions on all your posts. You can set the default number of recently-commented-on posts to anything between 1 and 10 in the widget’s setting. Note that this widget can only be embedded once on a given page.

You must enable Webhooks on the plugin settings and then set up an integration in your main Muut Forum settings with the information provided in the now-enabled Webhooks section of your the plugin’s settings.

  • Trending Posts

This widget also depends on features in the Small plan… seriously, you should look into those. The trending posts widget shows which posts have received the most comments and likes. You can display threads from your entire forum or from specific channels that you can select from the widget’s settings.

As with the Latest Comments widget, you must enable Webhooks on the plugin settings and then set up an integration in your main Muut Forum settings with the information provided in the now-enabled Webhooks section of your the plugin’s settings.

If for some reason the list of channels on the widget settings does not appear to be up-to-date, just visit your main Forum Page logged in as the forum administrator and then return to the admin page to have that list refreshed.

  • Online Users

This widget will display the avatars of any logged-in users; additionally you can set it to display the number of currently signed on users and also to show the number of anonymous visitors. This is especially cool if paired with Single Sign-On (SSO), as it shows all members logged into the site—not Muut-specific.

  • Channel

You can use the channel widget to embed a specific channel in your sidebar. You can opt to disable image uploads, as with your other channel embeds. If you are trying to get the widget to point to a specific Muut path, add the following line to your theme’s functions.php file: add_filter( 'muut_show_channel_widget_channel_path_field', '__return_true' ); That will add an extra field to the widget’s setting form to specify the Muut path.

  • My Feed

The My Feed widget displays the current user’s Muut Feed, effectively the content under the “My Feed” tab on your main Forum Page. As with the Channel widget, you can disable image uploads if you would like.

Webhooks

SMALL Custom S3 Bucket requires the SMALL plan or above.

Muut Webhooks are HTTP callbacks triggered by Muut events. They can be easily set up to send messages to your WordPress website in real-time when certain Muut events occur (replies, likes, etc.), which then makes possible many advanced features. Some Muut widgets, for example, rely on the working of Webhooks.

Once you have enabled Webhooks in the Muut plugin for WordPress, take note of the displayed URL and Secret. Then visit your Muut settings and create a new integration under the Integrations section; give the integration a name, and enter the URL and Secret. Make sure that all the events are enabled.

Translate the plugin

To make a translation for the plugin, first you’ll want to download Poedit and a fresh copy of the Muut plugin. Once you’ve done that, you can open up Poedit and click “Create new translation” (…from an existing POT file); on the file opener, navigate to the Muut plugin you downloaded and select the muut.pot file within the lang subdirectory (i.e. muut/lang/muut.pot). It will allow you to select the language you are translating into, and then it shows you a list of all the text strings within the plugin. Just click each one and enter the translation at the bottom of the window. The strings with a %s or %d mean that there is a variable portion, like a number; just include the same variable symbol in your translation line where it makes sense (you’ll see what I mean when you start translating).

Once you’ve translated all the strings, you can save and it will create a .po and a .mo file. Make sure to rename them in the same format as the French translation files included in the plugin: muut-fr_FR.mo and muut-fr_FR.po, just replace the language abbreviation to match whatever is set in your website’s wp-config.php file. Then you should upload those two files to the same directory in your plugin install on your website. If you would like to kindly email both files to [email protected], then we will add them to future releases.

WordPress plugin pageGitHub repository

Shopify

Modern forums and commenting for the popular e-commerce platform.

Now you can integrate Muut forums and commenting directly with your Shopify store. With support for Shopify Customer accounts and easy liquid templates, Muut is the perfect addition to help your store’s community thrive. You can find the Muut Shopify app in the Shopify App Store here.

Full blown forums

Realtime commenting on products and posts

Benefits

  • Unified system for both forums and commenting. Same users and design
  • Full featured forums makes your Shopify store conversational
  • Flat or threaded commenting on products, posts, or other pages for small or big topics
  • Skinnable style the discussion directly in your theme’s templates
  • Realtime. No page reloads – posts, replies, likes and users appear in realtime
  • Focus on content. Text focused, uncluttered and linear user interface
  • Customer Accounts. Customers can use their accounts at your store to post with Muut—no second log-in.
  • Search engine optimized. Improve your ranking with user generated content
  • Spam filtering, email notifications and 20+ different language versions

Setup

Registration

Once you’ve added the Muut app, you’ll be prompted to select which subscription plan you’re interested in; you can either use the Small plan or Medium plan; the primary features of each are listed underneath as they pertain to Shopify stores. In either case, you’ll have a 14-day trial before being billed, so you’re free to try out all the great features without a full commitment. Once you’ve selected the plan, you can either log in with an existing Muut account or create a new one by clicking the Join tab. Once you’ve created your forum (or selected one that you already have registered on your account) you’ll be taken to your main settings page!

Settings

You can see, the settings page for the app is very simple.

The language dropdown will allow you to select a language for the frontend interface that your customers will see.

Below that, you have the option of enabling advanced Muut widgets. That will enable the backend settings required for the Latest Comments and Trending Topics widgets to function. Note that the widgets will only work for posts that are created AFTER that setting is enabled, so if you are planning to use the widgets, it is recommended you enable it sooner rather than later. You can always disable it down the road if you decide you will not be using those widgets.

The Customer Accounts feature allows you to use your store’s customer accounts for the Muut community as well. If they are logged into your website, they can post comments and in the forum; they don’t have to sign in with a separate Muut account. This will only work if you have Custom Accounts enabled in the Checkout settings for your store. If you enable this setting, you will have to create an administrator customer account for yourself that uses the same e-mail address as the one you used to create your forum with Muut. That will make it so that if you are logged in as that customer, you’ll be able to perform the necessary administrative functions on the frontend, such as using the Visual Editor or banning users.

With the Custom S3 Bucket Endpoint, you can enter the full URL for the URL for the bucket root that you are using for your forum’s index generation. You’ll have to set up the S3 bucket itself following the instructions in the Custom S3 Bucket section of the Muut documentation, and then the final bucket URL can be entered in this field on the Shopify app’s settings.

The Muut-specific forum settings are accessible by clicking the Advanced Settings button or by visiting the forum page on your frontend as the forum administrator and clicking the Settings button there.

Embedding

There are three primary ways for embedding Muut in your Shopify website. You can embed the full forum UX; use threaded and flat commenting on pages, articles, and products; and embed a single channel endpoint on a given page.

Full Forum

It is incredibly easy to add Muut commenting and forums to your store. Right off the bat, we’ve generated a new page template for your forum. If you add a page to your store and scroll down to the template selector, just open the dropdown and select page.forum as the template and it will automatically add that. If you would like to add the forum somewhere else, or add it to a different template, the liquid tag you will want to use is:

{% include 'muut-forum' %}

You can see more details about editing the liquid files below regarding adding Muut commenting.

Commenting

To add commenting, we’ve created a simple liquid tag that you can drop into any of the page templates for products, blogs, or other articles. Simply visit the themes section of your site administration dashboard. Hover over the “…” button on the active theme and select Edit HTML/CSS from the dropdown. You’re now in the template editor. Click the product.liquid template in the left bar. Scroll all the way to the bottom and paste the line:

{% assign muut_type = "flat" %}
{% include 'muut-comments' %}

Press the save button at the top right and take a look at one of your product on your store’s frontend. You’ll see that the slick and minimalist Muut commenting has been added to the bottom. You can immediately see how seamless it fits into your theme. If you would prefer to have the commenting somewhere else on the page, you could paste that line somewhere else in the liquid template rather than all the way at the bottom.

If you want to use threaded commenting just change the first line to be: {% assign muut_type = "threaded" %}. It is actually an optional line otherwise as it defaults to flat commenting.

Standalone Channel

If you want to embed a standalone channel in a template, you can do so with another simple liquid tag. Follow the instructions about comment embedding to see how you can edit liquid templates, and the block you will want to use is:

{% assign muut_path='your-channel-path' %}
{% assign muut_title='My Channel!' %}
{% include 'muut-channel' %}

The first two lines are optional and can be left out, as they can be generated automatically, but if you are wanting to include a specific Channel path and title, you can use those settings to do so. From the main forum, you can see what a channel’s path is in the URL after the #!.

Note If the liquid tags don’t seem to be working, or you don’t see the page.forum template, visit the Muut app’s settings page and click the Reset Templates button in the top right corner next to the Save button. That will re-add the templates and tags.

Widgets

The Shopify Muut app comes packaged with five widget tags that allow you to embed small pieces of functionality from your Muut community on any of your pages you’d like. Simply drop the specified liquid tag where you would like the widget content to appear on your page and it will work straightaway.

Online Users

The online users widget shows which users are currently logged into your community, and also how many anonymous users are using your store. Simply add the template tag outlined brloe.

<h3>Online Users (or your title name)</h3>
{% include 'muut-widget-whosonline' %}

My Feed

This widget allows your users to access their Feed (all threads they are subscribed to or participating in. It is recommended that you do not place this widget on pages with another full Muut embed, either the Forum or Commenting, as it can exhibit unexpected behavior.

<h3>My Feed</h3>
{% include 'muut-widget-myfeed' %}

Discussion Channel

The Discussion Channel widget allows you to embed as a widget a specific Muut path. Perhaps it is a general welcome-to-the-store channel or a channel with the latest deals in it. Either way, it is a great way to tie your community together.

<h3>Channel 1</h3>
{% assign muut_path = "/channel-1" %}
{% include 'muut-widget-channel' %}

Latest Comments

The Latest Comments widget shows a list of the five posts/products/articles that have been most recently commented on, along with the avatar of the last commenter and how long ago it happened. The widget of course updates in real time as new comments are made! This widget requires “Advanced Widgets” to be enabled in the app settings.

<h3>Latest Comments</h3>
{% include 'muut-widget-latestcomments' %}

Trending Topics

The Trending Topics widget shows the five most popular threads in the forum (in the public channels listed in the navigation) that have activity within the last week. It is based on number of comments and number of likes for each post. The trademark “user typing” circle will show in real time as new users are interacting on each of the threads, with the comment and like counts updating dynamically. This widget requires “Advanced Widgets” to be enabled in the app settings.

<h3>Trending Topics</h3>
{% include 'muut-widget-trendingtopics' %}

Styling

You can use Muut’s visual editor to add additional styles to your forum and embeds. Simply visit the forum page and underneath the channel navigation you can see the Designer button. Simply click that and you can style the forum and commenting sections however you wish, using one of the pre-packaged themes or finessing it more specifically.

If you would like to customize the CSS even more specifically on your own, you should visit the Template Editor (as you do when adding template tags to tempalates), and scroll down in the template navigator to the Assets section, and create a new asset called “muut-shopify-custom.css”. All custom CSS rules added to that will be applied to Muut embeds on your website created using the app.

Squarespace

Integrating Muut to your Squarespace site is as easy as inserting a two-line snippet to a Code Block on any number of your Squarespace pages. Here is an example (simply replace community-name with your own forum name):

<a class="muut" href="https://muut.com/i/community-name">Your Forum Title</a>
<script src="//cdn.muut.com/1/moot.min.js"></script>

To learn more about the flexibility of embedding Muut, please take a look at our documentation.

Wix

The Muut app is available (made by Wix) that you can easily add to your Wix site from Wix App Market. You can find the official documentation here.

NOTE All Wix apps are implemented as iframe elements, therefore the Wix app does not deliver the full power of Muut in terms of customizability. However, we are in close touch with the Wix team in order to progressively build more flexibility into future iterations of the app.

API

Introduction

Muut provides JavaScript API for developers so that (at the end of the day) you are able to build awesome Muut extensions.

NOTE This API documentation is a work in progress as we finalize the specification. There is currently only one documented API method. Eventually the complete API will thoroughly cover every aspect of our platform, enabling all possible interactions with Muut.

/postcounts

postcounts is a simple GET request to query the number of posts in one or more specified paths. For paths to the root of a forum or to a channel, it returns the number of threads contained; For paths to a single thread, it returns the number of replies in the thread, excluding the seed post. If the path does not exist, it returns size of 0.

api.muut.com/postcounts?path=/forum&path=/forum/cat&path=/forum/cat:thread-id

Returns JSON:

{
  "/forum": {"size": 123},
  "/forum/cat": {"size": 23},
  "/forum/cat:thread-id": {"size": 2}
}

Examples:

As a RESTful method, you can directly call postcounts by visiting a URL in the browser, such as

https://api.muut.com/postcounts?path=/moot&path=/moot/open-word&path=/moot/open-word:you-spent-35-years-on-this&path=/goma

To make further use of the returned JSON data, you can take advantage of jQuery’s getJSON() method with callback. The following code, for example, presents the JSON data in an HTML definition list.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Muut API / postcounts</title>
  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>
  <!-- container for results -->
  <dl id="results"></dl>

  <script>
    var url = "//api.muut.com/postcounts?path=/moot&path=/moot/open-word&path=/moot/open-word:you-spent-35-years-on-this&path=/goma";

    $.getJSON(url, function(json) {
     var results = $("#results");
     $.each(json, function(key, val) {
      results.append("<dt>" + key + "</dt><dd>" + val["size"] + "</dd>");
     });
    });
  </script>
</body>

</html>