Description
Messenger.js is a library for easily creating a chat interface and managing message generation
Usage
To create your chat interface, just declare Messenger.js after installing it in your project. You can specify in which container your chat will be display.
let messenger = new Messenger(?container);Parameters
options.container {String} Optionnal container for the messenger HTML element
Properties
receiver
Before calling a methode add this propertie to set the user to receiver so the message will be display on the left
messenger.receiver.text("A message from the receiver");sender
Before calling a methode add this propertie to set the user to sender so the message will be display on the right
messenger.sender.text("A message from the sender");application
This is a generic user to display application message on the center of the interface
messenger.application.text("A message from the application");Methodes
.text()
Create a text message
Usage
messenger.receiver.text(content, ?{comment: ?comment, callback ?callback});Parameters
content {String} Text content of the message
options.comment {String} Optional comment of the message
options.callback {Function} Optional callback when the message is append to the document
Example
let text = new Messenger({container:"#text-message"});
text.receiver.text("This is a text message");
text.receiver.text("Another text message");
//Text message with comment
text.sender.text("A message from the sender", {comment:"This is a comment"});
text.receiver.text("A message from the receiver", {comment:"A comment above the receiver message"});
//Text message with callback
text.sender.text("Message with callback", {comment:"Message with callback (look at the consle)", callback: (el) => { console.log(el) }});.image()
Create an image message
Usage
messenger.receiver.image(src, ?{comment: ?comment, callback ?callback});Parameters
src {String} Image path
options.comment {String} Optional comment of the message
options.callback {Function} Optional callback when the message is append to the document
Example
let image = new Messenger({container:"#image-message"});
image.receiver.image("mentalista-guinguette.jpg");
//Image with comment
image.sender.image("mentalista-guinguette.jpg", {comment:"Image with comment"});
//Image with callback
image.sender.image("mentalista-guinguette.jpg", {comment:"Image with callback (look at the console)", callback: (el) => { console.log(el) }});.link()
Create a link message
Usage
messenger.receiver.link({url, title, source, ?img}, ?{comment: ?comment, callback ?callback});Parameters
link.url {String} Link url path
link.title {String} Link title
link.source {String} Link source (ex: mentalista.fr)
link.img {String} Optional link illustration
options.comment {String} Optional comment of the message
options.callback {Function} Optional callback when the message is append to the document
Example
let link = new Messenger({container:"#link-message"});
link.receiver.link({
url: "https://www.courrierinternational.com/article/chansons-des-programmes-dintelligence-artificielle-font-leur-eurovision",
title: "Des programmes d’intelligence artificielle font leur Eurovision",
source: "Courrierinternational.com",
img: "https://www.courrierinternational.com/sites/ci_master/themes/ci/images/facebook_img_defaut.png"
});
//Link with comment
link.receiver.link({
url: "https://www.courrierinternational.com/article/chansons-des-programmes-dintelligence-artificielle-font-leur-eurovision",
title: "Des programmes d’intelligence artificielle font leur Eurovision",
source: "Courrierinternational.com",
img: "https://www.courrierinternational.com/sites/ci_master/themes/ci/images/facebook_img_defaut.png"
},{
comment: "Link comment"
});
//Link without image
link.sender.link({
url: "https://www.courrierinternational.com/article/chansons-des-programmes-dintelligence-artificielle-font-leur-eurovision",
title: "Des programmes d’intelligence artificielle font leur Eurovision",
source: "Courrierinternational.com"
},{
comment: "Link without image"
});
//Link with callback
link.sender.link({
url: "https://www.courrierinternational.com/article/chansons-des-programmes-dintelligence-artificielle-font-leur-eurovision",
title: "Des programmes d’intelligence artificielle font leur Eurovision",
source: "Courrierinternational.com",
img: "https://www.courrierinternational.com/sites/ci_master/themes/ci/images/facebook_img_defaut.png"
},{
comment: "Message with callback",
callback: (el) => {
console.log(el);
}
});.audio()
Create an audio message
Usage
messenger.receiver.audio(src, ?{comment: ?comment, callback ?callback});Parameters
src {String} Audio path
options.comment {String} Optional comment of the message
options.callback {Function} Optional callback when the message is append to the document
Returns
audio element
Example
let audio = new Messenger({container:"#audio-message"});
audio.receiver.audio("https://sandbox.data.bingo/roue-des-datapepettes/sounds/animals/canard.mp3");
//Audio with comment
audio.sender.audio("https://sandbox.data.bingo/roue-des-datapepettes/sounds/animals/canard.mp3", {comment:"Audio with comment"});
//Audio with callback
audio.sender.audio("https://sandbox.data.bingo/roue-des-datapepettes/sounds/animals/canard.mp3", {comment:"Audio with callback (look at the console)", callback: (el) => { console.log(el); /*el.play();*/ }});Custom Event
messenger
You can easily generate a message anywhere in your javascript by calling the "messenger" event
Usage
//Don't forget to initialise messenger before dispatch an event
//In the content variable put the values how they are expected by the function you call
//Comment and callback are optional variable
let event = new CustomEvent('messenger', {
'detail': {
user: 'sender',
type: 'link',
content: {
url: "https://data.bingo",
title: "Studio de design & technologie",
source: "https://data.bingo",
img: "https://data.bingo/img/index/equipe.jpg"
},
comment: "A fabulous team <3",
callback: (e) =>{
console.log(e);
}
}
});
document.dispatchEvent(event);
let anotherEvent = new CustomEvent('messenger', {
'detail': {
user: 'receiver',
type: 'text',
content: "Omg they are so beautiful ❤️❤️"
}
});
document.dispatchEvent(anotherEvent);