Latest topics
» "Edit this page" feature
by skouliki Today at 01:36

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Tue 17 Oct 2017, 15:07

» Dark Mode + Another Question
by Ace 1 Tue 17 Oct 2017, 12:42

» [GAME] What are you thinking right now?
by Ace 1 Tue 17 Oct 2017, 08:09

» [GAME] Count to One Million!
by Ace 1 Tue 17 Oct 2017, 08:07

» [GAME] Last Letter Game
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] World Snake
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Never have I ever..
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Animal Game
by universecat Mon 16 Oct 2017, 21:43

» [GAME] Post a random picture
by SLGray Mon 16 Oct 2017, 16:28

» Hi everyone!
by skouliki Mon 16 Oct 2017, 02:01

» Hai Guys~
by skouliki Mon 16 Oct 2017, 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

» Chit Chat Thread
by Ange Tuteur Sat 14 Oct 2017, 11:20

Recent Tutorials
Who is online?
In total there are 9 users online :: 1 Registered, 0 Hidden and 8 Guests

Flerex

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Forumactif Messenger - Instant Message Application for Forumotion

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 17 Jul 2017, 11:18

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

Some other feature Forumactif Messenger includes are..

  • Real time navigation and messaging.
  • Sound notification for messages.
  • Tabs for having multiple chats opened at once.
  • GIF Search and other attachment options.
  • Community submitted themes selector.
  • Multiple supported languages.
  • Fullscreen window display.
  • Update and Configuration manager.
  • Live Searching, and more...


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

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 ! Party 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. Victory 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 ! :yesss: 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.


Last edited by Ange Tuteur on Sun 23 Jul 2017, 12:49; edited 1 time in total

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 15 Aug 2017, 10:10

@DDril that's because the URLs for the initial tabs weren't checked to see if they were appended with the query
Code:
?view=newest
. I hadn't considered that, so it can be problematic. I'll look into checking these URLs, so that it can be appended to topics, so that'll be another thing to add to the todo list. For the moment, just add
Code:
?view=newest
to the end of your topic URLs to show the newest posts.

So from this :
http://fmdesign.forumotion.com/t1378-forumactif-messenger-instant-message-application-for-forumotion

to this :
http://fmdesign.forumotion.com/t1378-forumactif-messenger-instant-message-application-for-forumotion?view=newest
avatar
DDril

Title :
Gender : Unspecified
Posts : 30
Points : 1317
Reputation : 16
Language : French & English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostDDril on Tue 15 Aug 2017, 10:25

Oh ok, thx !
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4730
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sat 26 Aug 2017, 21:12

Is there something in the coding that I can modify to move the button at the button of the forum? I have another button there already.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 27 Aug 2017, 10:30

@SLGray add the following CSS rules to your stylesheet. It should move the button and window to the left of the screen.
Code:
#FAM:not(.FAM-fullscreen) + #FAM-button, #FAM.FAM-fullscreen[data-hidden="true"] + #FAM-button {
  left:3px;
  right:auto;
}

#FAM:not(.FAM-fullscreen) {
  left:3px;
  right:auto;
}
If you want the keep the window on the right, just remove the last CSS rule. I'll look into adding an option for this in the future. Wink
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4730
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sun 27 Aug 2017, 22:10

Thanks. It would be nice for it to be included.
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 43
Posts : 844
Points : 2436
Reputation : 78
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Fri 06 Oct 2017, 16:05

Hello @Ange Tuteur,
How can I have the messenger continuesly open like your forum? I want it to have on the top of forum instead the bottom.

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 07 Oct 2017, 11:09

Hi @Van-Helsing,

To have Forumactif Messenger always open, like on this forum, you have to use the embed configuration option. See the following link for more information.
https://github.com/SethClydesdale/forumactif-messenger/wiki/Config#embed
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 43
Posts : 844
Points : 2436
Reputation : 78
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Sat 07 Oct 2017, 12:20

Hi @Ange Tuteur
I have a question must I add between
Code:
<div></div>
the js code? I was tried many things following the embedded function without success somewhere maybe I was confused.

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 08 Oct 2017, 10:46

Place the following tag anywhere on your forum. Forumactif Messenger will appear there when configured to do so.
Code:
<div id="FAM-embed-box"></div>

Once you've place the tag, go to Admin Panel > Modules > JS Codes management > Forumactif Messenger. Find the embed config option, and set
Code:
#FAM-embed-box
as the value, so you get the following result.
Code:
embed : '#FAM-embed-box'

Save the script and Forumactif Messenger should now be embedded on your forum where you placed the HTML tag.
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 43
Posts : 844
Points : 2436
Reputation : 78
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Sun 08 Oct 2017, 14:06

Thank you very much @Ange Tuteur I have been fixed it. cheers

--------

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum