I need to create something super simple where users can communicate back and forth with each other. I’m not looking for an actual online forum like this, so Wix Forums is a no-go.
Just a super simple, send and receive messages.
My website allows for users to sign up for projects. So, once they sign up for a project I need to have some sort of chat where they can communicate with the project manager or other people on the project.
Hey,
I recommend checking out our App Market to find a chat app which suits your needs.
Have a good day,
Tal.
App Market is a terrible solution for this.
Hi,
There are multiple chat apps on our app market that you can check instead of writing your own code. You can check see which one suits your needs.
Tal
None of them suit my needs.
Hey,
What are your needs? Please elaborate what you are trying to achieve.
Tal.
My website is needing member to member chat/messaging. Is that possible using codes and stuff?
Hi Tal –
I agree with Manny. I still haven’t found a serviceable solution for this. App Market is pretty lackluster. To be honest, something like the HTML component messaging demonstration would work for me: Velo: Working with the HTML iframe Element | Help Center | Wix.com.
I just need something that allows my users to chat amongst themselves, not necessarily with the site owner.
Ideally, it will be a solution that does not involve HTML, just because that is not easily customizable, and is somewhat burensome to use, especially for those of us who have learned code from Wix Code and not traditional HTML/CSS.
Hi Alexey – I think your solution is a little more complex than what I am looking for.
Manny – I realized that you can just code out a very basic messenger in Wix using repeaters. I created a Messages dataset, with three fields “Message”, “User”, “Thread”. Then you can code it to populate the repeater with message content from each “thread” and also pull in user information if necessary. That’s the quick and dirty but it works like a charm as a back and forth messenger between uesrs.
That’s a great solution, yes. Could you elaborate a bit more? Thank you David.
You’ll need to have a decent understanding of coding to make this work. But if you have some experience coding this should be able to get you started. I’ve attached a photo of what it looks like. It’s just a simple repeater, then I populate all the necessary information with code (see below).
In my code, where I have application_id, you can think of that as the particular chat thread. So, it’s a dynamic page for each “thread”, and when the page loads I query my message database based on the particular thread. Then push that message data into the repeater. The rest of the code is just formatting and aesthetics.
import wixData from 'wix-data';
$w.onReady(function () {
let dynamicItem = $w('#dynamicDataset').getCurrentItem();
setChat(dynamicItem);
});
function setChat(dynamicItem) {
let repeaterData = [];
wixData.query("Messages")
.eq("application_id", dynamicItem._id)
.find()
.then( async (results) => {
let messageItems = results.items;
$w("#repeater1").onItemReady( async ($w, itemData, index) => {
$w("#repeaterText").text = itemData.message;
$w("#profilePicture").src = (await getProfile(itemData._owner))[0];
$w("#name").html =
`<p style="font-size:15px; line-height:1.2em; color:#605E5E;" text-align:center">
<span style="letter-spacing:0.0em"><span style="font-family:avenir-lt-w01_85-heavy1475544, sans-serif;"><span style="font-size:15px">${(await getProfile(itemData._owner))[1]} </span></span></span></span>
</span></span></span></span><span style="letter-spacing:0.0em"><span style="font-weight:400"><span style="font-family:avenir-lt-w01_35-light1475496, sans-serif;"><span style="font-size:13px">${await formatDaysAgo(itemData._createdDate)}</span></span></span>
</span></p>`;
});
// }
dateSorter(messageItems);
$w("#repeater1").data = messageItems;
});
}
function dateSorter (repeaterData) {
repeaterData.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a._createdDate) - new Date(b._createdDate);
});
}
function getProfile (userId, i) {
return wixData.get("Member_Database", userId)
.then( async (results) => {
let memberItem = results;
let name = memberItem.firstName + " " + memberItem.lastName;
return [memberItem.profilePicture, name];
});
}
export function submitMessage_click(event, $w) {
let dynamicItem = $w('#dynamicDataset').getCurrentItem();
let toInsert = {
"message": $w("#messageInput").value,
"application_id": dynamicItem._id,
};
wixData.insert("Messages", toInsert)
.then( (results) => {
$w("#messageInput").value = "";
setChat(dynamicItem);
});
}
function formatDaysAgo(date) {
var ago = new Date().getTime() - date.getTime();
if (ago < 44 * 1000)
return "a few seconds ago";
else if (ago < 89 * 1000)
return "a minute ago";
else if (ago < 44 * 60 * 1000)
return Math.round(ago / 60 / 1000) + ' minutes ago';
else if (ago < 89 * 60 * 1000)
return "an hour ago";
else if (ago < 21 * 60 * 60 * 1000)
return Math.round(ago / 60 / 60 / 1000) + ' hours ago';
else if (ago < 35 * 60 * 60 * 1000)
return "a day ago";
else if (ago < 25 * 24 * 60 * 60 * 1000)
return Math.round(ago / 24 / 60 / 60 / 1000) + ' days ago';
else if (ago < 45 * 24 * 60 * 60 * 1000)
return 'a month ago';
else if (ago < 319 * 24 * 60 * 60 * 1000)
return Math.round(ago / 29 / 24 / 60 / 60 / 1000) + ' months ago';
else if (ago < 547 * 24 * 60 * 60 * 1000)
return 'a year ago';
else
return Math.round(ago / 365 / 24 / 60 / 60 / 1000) + ' years ago';
}
Thank you sooooo much. Looks pretty legit. I’ll give it a try tonight.
Hi David Seroy, thank you for sharing the brilliant idea of using repeaters!
May i please ask two questions at the top of your code:
This conversation is only view able to certain groups of people, which is why I have it set to a dynamic page and then also am defining the DynamicItem. For example, let’s say I am running a school website, that has 3 different classes. Biolology, Math, English. Each class has a different conversation or messaging window. So, I have 3 different dynamic pages for each class, then in the code I am getting the dynamic ID for that particular class, then querying any messages that have been posted. Logically the code works as such:
What is the ID of the class? (Biology)
Query for any messages that pertain to Biology (Bio Messages)
Sort those messages in order
Use the Member ID in the Bio Messages to Query my member database and pull in their info, like profile photos and names.
Place those Bio Messages in the repeater
Done.
The setChat function is just my personal organizational preference for writing code. I don’t like having all of it together in the onReady function, so I just package it into functions then reference it from the onReady. There’s really no need for me to do it here, so you can remove it as a function of you wanted.
Ah ok i think i get it. but trouble is that for the two users to go back and continue the chat would require storing & creating a link to that specific page. Else each time a new dynamic page will be created yeah?
Hi Jakob, there are plenty of free available resources from Wix on how to create profiles. Search the forums or articles. They do a much better job than I could explain and it’s the same code I used.
Can someone help me? WIth the chat I don’t understand it.
.eq(“application_id”, dynamicItem._id) this for example
I dont no coding.what can i do with these codes? can i do this?
i tried to copy the code of repeaters, didnt work