WebChat (Still in development) Download 1.4.5

gb Kevin B 4 weeks ago

enter image description here

This component adds a mobile-first, individually styled web chat module to OSSN.

Latest Update

v.1.4.5 (27/11/20)
Updated Fully implemented GIPHY. You can now search for live results
Updated Uses API key stored in the Admin page
AddedImplemented customisable Home Button! Find it in the admin page
enter image description here
Updated Tidied up the contacts styling on the sidepanel
Updated Adjusted 'li' list items on admin page to fit full width on smaller displays
Updated Shortened the save button in the admin page to improve mobile view


OSSN >= v5.5
OssnMessages >= 5.4
OssnServices >= 6.4
Private Network >= 5.4


Demo site is running ossn 5.6, GreenByGreen theme and only has Private Network, API Services and WebChat components installed.

Future Features:

Regular message read status check
Group messaging
Managing group members
Integrate Video/Voice calling


OSSN Services (API)

If you haven't used the Web Services before, make sure you generate an API key, otherwise some of the functionality will not work.
enter image description here
Update your webchat.manifest You will not be able to install the PWA app on your mobile without hardcoding the full URLs into the webchat.manifest. In future I hope to implement an admin panel where you can generate the file without manually editing.

PWA Mobile App

Installing the PWA Each time a new version of WebChat becomes available, you should clear the browser cache on your phone before attempting to "Add To Home Screen"

I'd be grateful for feedback on how I could improve the component. Any bugs or issues please also report here.

Older updates

Version history can be found in this Google Doc
WebChat Version History

gb Kevin B Replied 1 day ago

Might be a while before it's ready, but feel free to pay around on the demo site to see it progressing :)

ph Richard Cupal Replied 1 day ago

Wow future update makes me feel excited! Keep up Sir!!

gb Kevin B Replied 6 days ago

In case anyone is waiting for an update, it may be a week or so before the next release... but its a big update.

I've created a Group Chat functionality, which will also completely replace the one-to-one chat messages. This means messages will no longer interfere with OSSN Messages and will be completely standalone.

I should also be able to massively improve performance with this too.

I'll then be aiming to implement url parsing so that when pages are cached offline with the ServiceWorker, you'll be able to still read the messages from all your chats. (I have a theory on how this'll work anyway).

I've attached a teaser of the UI for the Group Chat in case anyone is interested.

GroupChat UI Teaser

gb Kevin B Replied 1 week ago

1.4.4 update out. Still plenty to do but it's coming along nicely I think. :)

gb Kevin B Replied 2 weeks ago

Ignore the last comment... I think I figured it out and it's much easier now I understand your code 😉

Thanks again for the assistance.

gb Kevin B Replied 2 weeks ago

Thanks for that Arsalan.

Sorry for asking a dumb question, but i'm still an ossn n00b, so not 100% sure what this is doing. Does it extend messages to be able to process additional parameters?

So for instance, I prepare a new message like below:

$user = ossnuserbyguid(ossnloggedin_user()->guid);

    $instance = ossn_get_message($message_id);
    $message = $instance->message;

    $params['message_id'] = $message_id;
    $params['user'] = $user;
    $params['message'] = $message;
    $params['instance'] = $instance;
    $params['view_type'] = 'actions/send';
    $params['giphyJSON'] = $json;
    echo ossn_plugin_view('messages/templates/message-send', $params);

Then update the below to send the appropriate content?

function my_custom_message_stuff() {
    ossn_add_hook('messages', 'message:smilify', 'my_message_template_config');
    ossn_add_hook('chat', 'message:smilify', 'my_message_template_config');

function my_message_template_config($hook, $type, $text, $params) {
    if (isset($params['instance']->giphyJSON)) {
        $text = isset($params['instance']->giphyJSON);
        return $text;
    elseif (isset($params['instance']->message)) {
        $text = $params['instance']->message;
        //more stuff
        return $text;
ossn_register_callback('ossn', 'init', 'my_custom_message_stuff');
German Arsalan Shah Replied 2 weeks ago

In OSSN message there is no trigger that checks images as there is no image adding facility in default chat/messages.

You may use following

function my_custom_message_stuff() {
    ossn_add_hook('messages', 'message:smilify', 'my_message_template_config');
    ossn_add_hook('chat', 'message:smilify', 'my_message_template_config');

function my_message_template_config($hook, $type, $text, $params) {
    if (isset($params['instance']->message)) {
        $text = $params['instance']->message;
        //more stuff
        return $text;
ossn_register_callback('ossn', 'init', 'my_custom_message_stuff');


gb Kevin B Replied 2 weeks ago

Hi arsalan
Thanks for the feedback. Yes I can make that change. I think my thought process was that anyone that installs the WebChat component is unlikely to use the in-built OSSN message system. I was even toying with removing it from the menu to make it a total replacement.

I think you're right though. It needs to be agnostic, so I'll look at adding the two URLs (there's a preview IMG and a full screen image) and then preg_match to trigger the display.

How does ossn message handle image URLs? Is it [URL]www.web.com/image.png[/URL] ?

German Arsalan Shah Replied 2 weeks ago

Ok I love the giphy integeration but the problem is:

  1. Messages text stored in database is JSON which is not recommended and will make issues in core OSSN chat and Messages.
    enter image description here

So the person not using webchat but using normal chat may see messages like this is not good.

What you can do is to simply store a actual gif image URL only to the message text and on retrieval end you may use a preg match to see if url contain giphy URL and have .gif somewhere in URL then you can use a method to show that gif image.

I hope you understand what I mean.

gb Kevin B Replied 2 weeks ago

I'll work on making it translatable towards the end.
If anybody would like to volunteer to look after any translations, please feel free to contact me - or just make a push request to the GitHub with the correct language file.
Thanks :)


Developer: Kevin
License GPL v2
Type: Communication
Minimum Requirement: 5.5
Latest Version: 1.4.5
Last Updated 1 week ago
Repository Url View Repository