Hi,
i wrote a little and helpful instant-messenger for my company-website. I did not want to pay for a professional solution, so I made my own.
Websend is a little messenger you can easily paste into your webseite for support-things. We use it to talk to people which are visiting our website.
Websend has its own little backend where are chat-sessions comes together. It is not completely done yet so we will add some features in the next days.
Feel free to download, modify and extend this little app.
Here are some screenshots:
https://www.dropbox.com/sh/rzg81ulvea0y87j/AAB7oxb3xscFyEqSC5wruQEZa?dl=0
Here’s the download:
https://www.dropbox.com/s/u3nbfskauu3qshn/Websend.xojo_binary_project?dl=0
Here is the way you can use it:
1) Upload the app to your webserver.
2) Insert the following HTML to your website:
<!-- Websend integrieren -->
<div id="websend_container" class="websend_outer closed">
<div class="websend_opener" onclick="show_hide_websend()"></div>
<div class="websend_title" onclick="show_hide_websend()">
HERE COMES THE TITLE
</div>
<iframe height="225px" frameborder="0" class="websend_inner" src="http://THE.IP.OR.URL/cgi-bin/websend/websend.cgi"></iframe>
</div>
3) Insert the following CSS to your website:
[code]/* ---------- Websend ---------- */
.websend_outer {
width: 306px;
height: 262px;
position: fixed;
top: calc(50% - 131px);
border: 0px solid #f95651;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
border-radius: 0 6px 6px 0;
transition: all 0.3s ease;
left: 0px;
z-index: 1000;
}
.websend_opener {
width: 40px;
height: 40px;
border: 1px solid;
position: absolute;
right: 0;
margin-right: -60px;
display: none;
cursor: pointer;
}
.websend_title {
width: 100%;
height: 35px;
background: #f95651;
border-radius: 0 6px 0 0;
padding: 6px;
color: #fff;
font-weight: 400;
cursor: pointer;
}
.websend_title:hover {
background: #f44336;
}
.websend_outer.closed {
left: -306px;
box-shadow: 0 0 #fff !important;
}
.websend_outer.closed .websend_opener{
display: block !important;
}
[/code]
4) Insert the following JQuery to your website (If you don’t use JQuery, you have to rewrite this):
<script>
function show_hide_websend(){
$('#websend_container').toggleClass('closed');
}
</script>5) The Backend is available under: http://THE.IP.OR.URL/cgi-bin/websend/websend.cgi?admin=1
THATS IT!