Forumactif Messenger - Instant Message Application for Forumotion

First topic message reminder :

Introduction

In this topic you will learn about Forumactif Messenger and how to install it on your Forumotion forum. Forumactif Messenger is a JavaScript plugin that integrates with your Forumotion forum to enable real time messaging in topics in a minimal design to make the experience more engaging.

CLICK TO VIEW DEMO

Forumactif Messenger is optimized to work on all major forum versions for Forumotion, so long as your forum's templates aren't heavily modified. Additionally Forumactif Messenger is enabled to receive updates from its Github repository to ensure that you are always using the latest version for the best experience. If you're ready to install Forumactif Messenger, move onto the next section or check out the demo by clicking the button above.


Jump to...

• Installing
  
• How to Use
  
• Settings
  
• Configuration
  
• Updating
  
• Contributing
  

Installing

Installing Forumactif Messenger on your forum is super easy. Go to Admin Panel > Modules > JavaScript Codes Management and create a new script with the following settings.

Title : Forumactif Messenger
Placement : In all the pages (or the page you want Forumactif Messenger to appear on)
JavaScript Code : Since the code for Forumactif Messenger is constantly improving, we ask that you copy the latest release from the link below.
https://raw.githubusercontent.com/SethClydesdale/forumactif-messenger/master/fam.js (You can use the shortcut CTRL+A to select the entire code)

Once the code is copied, paste it as the JavaScript Code and save.


Congratulations ! You have now installed Forumactif Messenger on your forum ! Proceed to the next section to learn how to use Forumactif Messenger.

How to Use

If you have successfully installed Forumactif Messenger you should see a new icon in the bottom right hand corner of your forum that looks something like this --> . Clicking this button opens the Forumactif Messenger window, which displays a minimal version of your forum. You may find the interface to be somewhat familiar if you have used an SMS or IM application before.


Go ahead and click through your forums, and find a topic to test out Forumactif Messenger. Once you have opened a topic, you should see a textarea along with 3 buttons at the bottom of the window; these are the message actions. For now, enter you message in the textarea and click the paper plane () or press ENTER to submit your message.

TIP : You can use SHIFT+ENTER to add a line break to your message.

You should have noticed that all this time you navigated through your forum and posted a message without ever leaving the page you are currently on ; this is just one of the many powerful features that Forumactif Messenger provides you with ! Now previously we mentioned 3 buttons for the message actions. You already used one of them, which is for sending messages. The other two buttons allow you to enter emoticons and attach media to your messages. Go ahead and try them out !


Last but not least is interacting with messages ! If you click the username of someone's message it'll add their mention handle to the message box, so you can mention them in your message. Additionally when you hover over any message, message actions will appear below it. These actions allow you to quote, edit, or delete a message, depending on your permissions. Go ahead and give these features a try !


Congratulations ! Now you know how to use Forumactif Messenger for messaging. Next up you will learn about the settings page, which offers you ways to personalize your use of Forumactif Messenger.

Settings

The Settings page of Forumactif Messenger offers various options to personalize your experience. To navigate to the settings page, click the menu icon ("•••") on the Forumactif Messenger toolbar to open the main menu and then the cog icon to open the settings page.


Once on the settings page you will be met with a number of options for personalizing Forumactif Edge. Such as the option to display the window in full screen mode, the option to change the theme to a darker color, or the option to enable a sound notification for messages. As the settings are constantly being expanded upon, it'll be impossible to list them all here, so we invite you to read up on all the settings on our wiki.
https://github.com/SethClydesdale/forumactif-messenger/wiki/Settings


Now that you know how to use the settings page, it's time to learn how you can customize the internal settings for Forumactif Messenger by using the configuration page.

Configuration

The Configuration page is accessible to administrators only, as they are the only members who can update the internal configuration of Forumactif Messenger. To access the Configuration page you must go to the Settings page (see the previous section) and click the Admin Configuration button at the bottom.


The configuration page allows you to change various settings for Forumactif Messenger, from the default chat_page to the entire language interface. Go ahead and give it a try by placing body as the value for Embed Container.


Once you have set the value of Embed Container, scroll to the VERY bottom of the configuration page and click the Update Configuration button. This will generate the updated code for Forumactif Messenger with your configuration settings. Go ahead and replace your Forumactif Messenger JavaScript code with it by going to Admin Panel > Modules > JS Codes Management. Make sure to edit your existing script for Forumactif Messenger and delete the existing JavaScript code. Once the old code is deleted, paste the new code that was given to you in the Configuration page.


If done correctly, Forumactif Messenger should now be embedded at the very bottom of your forum and doesn't require clicking a button to open ! As this was just an example, feel free to go back to the configuration page and delete the contents of Embed Container, if you don't want Forumactif Messenger displaying here. Click here for more information on the embed option.


Well done ! You now know how to use the Configuration page. As there are MANY options for configuring Forumactif Messenger, we invite you to read about all of them on our wiki.
https://github.com/SethClydesdale/forumactif-messenger/wiki/Config

Next up we will learn how to update Forumactif Messenger, which is a very important feature.

Updating

Forumactif Messenger is open source and constantly evolving. For the best experience it's recommended that you update Forumactif Messenger to the latest release whenever it's available. To update Forumactif Messenger click the menu button ("•••"), and click About ("?").


This will take you to the about page, which tells you what version of FAM you're running and the current release on Github. If an update is available a yellow exclamation icon will show and an update button will be available. Click this button to get the latest release from Github.


After a few seconds, the updated code will be available in the textarea. Copy this code and go to Admin Panel > Modules > JavaScript Codes Management and update your Forumactif Messenger script with it. Your configuration settings will be maintained, so don't worry about replacing your existing script.


Once you've saved the updated script, go to about again to confirm that you're running the latest version of Forumactif Messenger. If you are, a blue check mark will display and the update button will display as sync instead. Clicking the sync button will get the latest release from Github again. It's mainly used in cases where you've made internal modifications and want to revert to the default code.


This should be all that you need to know about using Forumactif Messenger, we'll allow you to explore the rest on your own ! If you'd like to help improve Forumactif Messenger, please see the next section.

Contributing

Forumactif Messenger is open source, so anyone can help build and improve it !

• Got a suggestion, have feedback, or find a bug ? Let us know in this topic with a reply OR on Github by opening a new issue !
  
• Are you a developer with a passion for creating Open Source technology and want to improve Forumotion ? Fork the repo on Github and help out with development. See our to do list or contact me to discuss development if you have any queries.
  

For more information about contributing please see the following pages.

• Contributing
  
• Code of Conduct
  

Loving the media viewer! Did you make it yourself from scratch like you planned to? :3
One thing for it though, maybe make it disappear when a user clicks outside of the image (the black area, basically LOL).

Milouze14 wrote:Hello Ange Tuteur ,
I just updated this last update and it fully functional my friend, thanks for the work done, you are a true Shakespeare of the script .

Tanks again and i offer you a small coffee .




a++

Great to hear ! Haha I never thought of it like that before.

I'll gladly take that coffee. Merci beaucoup !

Valoish wrote:Loving the media viewer! Did you make it yourself from scratch like you planned to? :3
One thing for it though, maybe make it disappear when a user clicks outside of the image (the black area, basically LOL).

Yep ! Save for the Font Awesome icons of course lol. If you're interested in the code you can view it @ fam.js:1469 and fam.css:973.

I was considering making it close when clicking the overlay, but I found it could interfere with the arrows when clicking through media. The position of the navigation arrows aren't static -- they change position based on the size of the media -- so if clicking rapidly you could end up closing the media viewer by accident which might be a tad annoying to some people.

Forumactif Messenger version 0.7.0 is now available ! This update finally enables functionality for the Settings page, adds pagination for topics and forums, and more. See the release notes below for more details.

• Added a Settings page (see "Settings")
  
  • Added an option to display Forumactif Messenger in Full Screen.
    
  • Added options to resize the chat window.
  
  
• Added "Load older messages" button to chats. (see twitter for demo)
  
• Added pagination to sub-forums. (see twitter for demo)
  
• Added flood control timeout indicator to the left of the textarea in chats. This indicator will let you know when you can send your next message. (see "flood_control")
  
• Added a custom HTML option to initial_tabs that allows you to create custom tab content using HTML.
  
• Added error message for when forums or topics could not be found.
  
• Added new lang aliases for the "About" page.
  
• Fixed a bug that caused the current tabs to be duplicated after closing and reopening FAM after initial startup.
  
• Changed how initial tabs are loaded. Instead of only loading on startup, you will now have the option to reload the initial tabs after all other tabs have been closed.
  
• Changed and cleaned up the design of various elements in chat messages, such as codeboxes, quotes, captchas, etc..
  

Release link : https://github.com/SethClydesdale/forumactif-messenger/releases/tag/v0.7.0


Help
Need help updating Forumactif Messenger ? Visit the guide below !
https://github.com/SethClydesdale/forumactif-messenger/wiki/Updating

Nice update, Ange! Keep up the good work

Constant updates, You sure do keep on top of things. You sir are the man!

There seems to be a bug with full-screen messenger and multiple browser tabs (basically brakes messenger), I will try to give more specific information later.

@Wolfuryo @BlackScorpion thanks

@Tonight does it have anything to do with the embedded chat and the settings persisting across multiple tabs ? ( i.e. the chat goes fullscreen when changing the page / opening new browser tab ) If so, I'll be looking into changing that behavior when Forumactif Messenger is embedded.

Yes, I'm using embedded messenger.

I opened two browser tabs and in first I set messenger @fullscreen. Issue is that only first tab controls these settings, therefore second tab is unusable because you can't see anything (beside empty Settings page).

By refreshing occurs a bug that brakes messenger (basically duplicates messenger) and only way to fix it is to clear browser's cache/cookies.

@Tonight thanks I'll see if I can replicate the issue on my end.

Also just to make sure, did you change

Code: FAM.page.setup('Settings', noHistory);

to

Code: FAM.page.setup('Seaded', noHistory);

? The string "Settings" is used to name the tab, but to also recall the page from history via object notation

Code: FAM.page.{page_name}.open()

. Changing this string will also require you to change the object name, so the page can be recalled correctly. I'll look into making this more flexible so that tab names can be changed, most likely by reusing the tooltip aliases.

Edit : This should be fixed in the next release ; I enabled the tooltip_{page_name} aliases to display as the tab title, so it'll be easier to translate. Thanks again for bringing this to my attention.

Hello @Ange Tuteur,

In the script:
I encounter a worry concerning the two parts mentioned below, the announcements and the first message remain posted !!!
I attach the images if necessary

Code:


ignore_announcements :true,
ignore_firstpost : true,


Thanks in advance my friend

a++

Hi @Milouze14,

Thanks for bringing this up. Currently these two options are placeholders for future functionality ; they're not yet active. I did however, finish implementing the functionality for these options earlier today, so you can expect them to be working in the next release.

Hello Ange Tuteur ,

Ah, I also told myself that it was amazing because I did not see any variables in the script.
Thank you very much my friend and good weekend .

a++

Forumactif Messenger version 0.8.0 is now available ! This update brings you a brand new search page for searching topics, message actions for interacting with messages, chat permissions, and more ! See the release notes below for more details on the changes made in this update.

• Added message actions. These allow you to do the following in chats. (see demo)
  
  • Quote messages.
    
  • Edit your messages.
    
  • Delete your messages.
    
  • Mods can edit and delete user messages if needed.
• Added a Search page. (see "Searching")
  
• Added chat_permission to config. This option allows you to decide who can use Forumactif Messenger.
  
• Added color indication for when new posts are unread in forums and topics. (see demo)
  
• Added translation support for menu tab names. (e.g. about, settings, search..) They now use the tooltip_{page_name} aliases.
  
• Enabled functionality for ignore_announcements and ignore_firstpost.
  
• Fixed Forumactif Messenger automatically going Full Screen when the chat was embedded. The Full Screen setting should only persist on the popup chat.
  

Release link : https://github.com/SethClydesdale/forumactif-messenger/releases/tag/v0.8.0


Help
Need help updating Forumactif Messenger ? Visit the guide below !
https://github.com/SethClydesdale/forumactif-messenger/wiki/Updating

Geeze... another update! Don't you ever take a break?? JK

Once again you keep on top of things, Great Job!

BlackScorpion wrote:Geeze... another update! Don't you ever take a break?? JK

Once again you keep on top of things, Great Job!

Nope ! Although I did have to take off for a bit recently, since I came down with a cold. Doing better now, hence the update.

Thanks. It has really come a long way over the past month. Just got a few things left on the todo list that need knockin' off now. 'course I'll still be listening in on you guys' suggestions and reports.

Yeah that nasty cold will get ya, no matter where you are!

Good to know your going to keep on top of things in the future also....

Hey everyone,

I figured I'd give you all a quick update on the progress for the next release. Since the most recent build has proven stable for production and we've nearly knocked everything off the todo list, I plan to make the next release a big one. Some notable improvements will be..

• The ability to log in and out with ease. (demo)
  
• Addition of a theme selector, so you can chat in a style you're more comfortable with, such as a dark theme. (demo)
  
• Along with the theme selector is an option for changing the main color, so you can chat in your favorite color as well. (demo)
  

The most notable addition will be support for community submitted themes. When the next release lands you'll be able to use any theme you want, and if none of the themes appeal to you, you can create your own and submit it to Forumactif Messenger for the community to use. So if any of you are interested in creating a theme for the next release of Forumactif Messenger and onward, give the link below a read.

https://github.com/SethClydesdale/forumactif-messenger/blob/master/CONTRIBUTING.md#contributing-a-theme

If you have any questions you can reach me on here, github, or twitter. See you soon and have fun.

Hello Ange Tuteur,
That good news my friend, I am looking forward to seeing all this,
Do not you take a vacation after all this?
Good Sunday .

a++

Milouze14 wrote:Hello Ange Tuteur,
That good news my friend, I am looking forward to seeing all this,
Do not you take a vacation after all this?
Good Sunday .

a++

Great to hear ! I'm sure you'll love the next update when it lands.

Considering the back-to-back projects I've taken on in the last few months, I had planned to take a break sometime this summer. I have some studies that I want to catch up on, games to play which I brought on the Steam sale, and general laziness that I must indulge myself in.

Thanks, have a good weekend.

Ok no worries for me, holidays will be welcome for you and also for everyone, a little rest will open our eyes at the start of the school year .
Hmm, are you aware of the switch to jQuery version 3.2 soon?
Will this not harm Messenger my friend?

a++

Milouze14 wrote:Ok no worries for me, holidays will be welcome for you and also for everyone, a little rest will open our eyes at the start of the school year .
Hmm, are you aware of the switch to jQuery version 3.2 soon?
Will this not harm Messenger my friend?

a++

Indeed.

Yes, I am aware of the transition. Forumactif Messenger uses a minimal amount of jQuery (Mostly for AJAX and some query selections), however, if there are any issues I'll address them ASAP.

OK my friend,
If we do not see each other, I wish you a good holiday
See you soon .
a++

It is working great.

One small bug I noticed (doesn't matter but I'm sure you would like your final version to be perfect):
- as a moderator, when editing other people messages, your own avatar is next to the box

@Tonight Thanks a lot taking the time to report this. (indeed, the tiniest of bugs must be annihilated ) I've noticed this myself recently and have made some modifications to ensure that the proper user information shows when editing messages which are not yours, to avoid confusion. This is how it should look in the next release :


Thanks again. ^^

Forumactif Messenger version 1.0.0 is now available ! This update brings a plethora of new additions which I invite you all to discover ! For more information about this update, please see the release notes below.

• Added a login option to the main menu. This will allow you to log in without having to change pages. (demo)
  
• Added a profile option to the main menu. This page let's you view your profile and log out. (see "hide_menu_avatar" for toggling avatar display)
  
• Added the following preset search links to the search page.
  
  • View posts since last visit
    
  • View today's active topics
    
  • View your posts
    
  • View unanswered posts
  
  
• Added theme and theme color options to the settings page. (demo)
  
• Added an online indicator to message avatars, so you know who is online in a chat. (demo)
  
• Added a message notification to chats. While viewing old messages you'll be notified when new messages are posted. Clicking the notification will quickly jump you to the new messages. (demo)
  
• Added a sound notification for new messages. This option can be turned on or off by the user via settings. (see "sound_notif_auto_enabled" and "sound_notif_file" for customization)
  
• Added "Admin Configuration" button to settings. This button will open up the config page for Forumactif Messenger, so the admin can configure internal settings. (demo)
  
• Added support for importing and exporting language data. (see "Importing" and "Exporting")
  
• Added update_channel option to configuration. This option lets you choose where you want to receive updates for Forumactif Messenger from ; "Production" (stable release) or "Developer" for beta testing new features.
  
• Added message restoration to new topic creation, so your messages wont be lost when an error occurs.
  
• Fixed Forumactif Messenger getting stuck on a loading screen when a new topic failed to be published. If the topic cannot be published you will be returned to the topic creation page.
  
• Fixed a bug that prevented the user from editing messages if they left the tab while editing a message.
  
• Fixed editing messages that are not yours from displaying incorrect parameters. When editing another user's message it should now correctly show their avatar and username, so you know whose message you're editing.
  
• Fixed a rare instance where a message would get stuck in sending mode, preventing you from sending any messages.
  
• Fixed message actions jumping out of the Forumactif Messenger body while loading a topic. This wasn't visible unless a background color was applied to the actions.
  
• Fixed message actions border erroneously showing up in sub-forums.
  
• Fixed pagination border showing when no pages were available.
  
• Changed display permissions for the sync/update button in the about page. It will now only show for Administrators.
  
• Changed hover effect for main menu items.
  
• Removed Forumactif Edge theme color from the Forumactif Messenger toolbar. The reason for removal was to avoid conflicts with custom themes and colors.
  
• Removed label and OK button for the emoticons drop down.
  

Release link : https://github.com/SethClydesdale/forumactif-messenger/releases/tag/v1.0.0


Demo
To celebrate this milestone, I've setup a demo for anyone who is on the fence about Forumactif Messenger. If you're unsure about Forumactif Messenger, but want to give it a try, you can do so by visiting our demo. Click the link below to give it a try !
http://demoactif.forumactif.com/t36-demo-forumactif-messenger?demo=fam&demo_user=true


Help
Need help updating Forumactif Messenger ? Visit the guide below !
https://github.com/SethClydesdale/forumactif-messenger/wiki/Updating

^^^^^ HELLA EXCITED FOR THISSS

Hi Ange tuteur ,

This part is configurable for the langage in the drop-down menu please :

Code:


 if (!{
          'all' : 1,
          'member' : _userdata.session_logged_in,
          'staff' : _userda



Thanks in any case for all the work done my friend .

a++

Valoish wrote:^^^^^ HELLA EXCITED FOR THISSS

It's a HUGE update, so there's gonna be a lot of new things to check out ! You can try out all the new features on the demo if you want.

Milouze14 wrote:Hi Ange tuteur ,

This part is configurable for the langage in the drop-down menu please :

Code:


 if (!{
          'all' : 1,
          'member' : _userdata.session_logged_in,
          'staff' : _userda



Thanks in any case for all the work done my friend .

a++

Hi,

Currently that's not translatable via normal methods, but I'll looking into changing that.

Thanks for the suggestion !

Ok my friend, thanks again for all you do for the community .

a++

Damn... This is something else.