Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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)

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)