https://github.com/piyushkmr/awesome-marketing-chat-sliders

Chat sliders for marketing of your whatsapp group or facebook page (can be scaled to any chat system)
https://github.com/piyushkmr/awesome-marketing-chat-sliders

List: awesome-marketing-chat-sliders

Last synced: 13 days ago
JSON representation

Chat sliders for marketing of your whatsapp group or facebook page (can be scaled to any chat system)

• Host: GitHub
• URL: https://github.com/piyushkmr/awesome-marketing-chat-sliders
• Owner: piyushkmr
• Created: 2015-04-09T15:03:40.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-08-09T07:35:45.000Z (over 3 years ago)
• Last Synced: 2024-05-20T22:35:58.133Z (6 months ago)
• Language: CSS
• Size: 2.1 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
Awesome Marketing Chat Sliders

Chat sliders for marketing of your whatsapp group or facebook page (can be scaled to any chat system).



Chat sliders for showcasing the Whatsapp Group Chat or your Facebook page posts to attract new users to join you. It can be scaled to any chat system that you may want to design for your next project.



I created it for website GREIO.com, but decided to distribute them openly for bugs and improvements.

For a demo just got to Demo folder and got to Faceboo-page or Whatsapp-page folder for respective demo.

For live demo visit:

http://greio.com/facebook


http://greio.com/whatsapp


How to use

The files

To use each folder in src has three files:


-chat.js (core file for the chat sliders)


-data.js (file from where all the variables are fetched)


-facebook.css/whatsapp.css (the stylesheet for respective pages)




To use just import all three files:


<script type="text/javascript" src="data.js"></scirpt>

<script type="text/javascript" src="chat.js"></scirpt>

<link type="text/css" rel="stylesheet" href="facebook.css"/>



The HTML

The best part is that it requires least html setup.

Initialize on any html div element:


<div class="chat-box"></div>



Then initialize just like any other jQuery plugin:


<script>

$('.chat-box').chatSlider();

</script>



The Javascript

You don't need to dig into javascript code, but you will have to change variables as per your need.


Go to data.js of any folder in src:

Facebook

Contains following variables:



message : Json variable for mesage strings

pageUrl : Url of facebook page to be liked

profileName : Profile name to be shown on posts

profilelogo : Profile logo URL (can be absolute or relative to index.html page)



Whatsapp

Contains following variables:



groupName : Group Name to be shown to user

users : list of dummy users can be listed to any users

chat : Json variable for chat messages, keys denote users index from users Array

colors : font color for respective users (input any number of colors)