HomeAdding Chatango Chat box to the footer on every page
3 posters
Page 1 of 1
Adding Chatango Chat box to the footer on every page
by Amira Lockeart Wed 5 Jun - 17:54
Technical Details
Forum version : #Invision
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : http://ninjavillagerebirth.forumotion.com/
Description of problem
Hey guys. I'm looking to see if anyone has a code that they used to add a chatango chat box to the footer of the forumotion site so that it will appear on all pages. I have a chatango code, and after looking through google to see other codes I feel like I've tried everything and nothing is working. My site is set as invision but I can change it if someone can assure me that the layout/theme I've created already wouldn't be messed up. Any help is appreciated. Thank you!Last edited by Amira Lockeart on Thu 6 Jun - 2:24; edited 1 time in total
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by brandon_g Wed 5 Jun - 22:33
Hello,
What is the code you have from Chatango? Can you provide it to us in code tags and one of us will try to have a look at it.
-Brandon
What is the code you have from Chatango? Can you provide it to us in code tags and one of us will try to have a look at it.
-Brandon
Remember to mark your topic
when a solution is found.General Rules | Tips & Tricks | FAQ | Forgot Founder Password?
Team Leader
Review Section Rules | Request A Review | Sticker Points
brandon_g- Manager
-
Posts : 10113
Reputation : 923
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Wed 5 Jun - 22:37
Yes of course.
- Code:
<script id="cid0020000220756308618" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 778px;height: 358px;">{"handle":"ninjavillagerebirth","arch":"js","styles":{"a":"000000","b":100,"c":"33ffff","d":"33ffff","e":"ffffff","k":"000000","l":"99ffff","m":"000000","n":"FFFFFF","p":"10","q":"000000","r":100,"sbc":"663366","cnrs":"0.35","fwtickm":1}}</script>
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Wed 5 Jun - 22:47
The only way for that to work is to edit the template that relates to the footer, add a custom element, and then attach that script to it. If you need help doing so, I can gladly assist.
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Wed 5 Jun - 22:55
That would be greatly appreciated, I'm not very well versed in coding or really where to input the code to mess with a footer. 
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Wed 5 Jun - 23:04
I'm not sure which template it is on your version as I haven't used it before, but if you could copy and paste your template: overall_footer_end.
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Wed 5 Jun - 23:11
It took me a minute to find it and it's really long so I put it in a code box, but if it's easier without the code box let me know, and I'll edit the post to remove it. ^-^
- Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<del>
<ul>
<li>
<!-- END html_validation -->
</li>
</ul>
<!-- BEGIN switch_footer_links -->
<ul>
<li>
<!-- BEGIN footer_link -->
<!-- BEGIN switch_separator --> | <!-- END switch_separator -->
{switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
<!-- END footer_link -->
</li>
</ul>
<!-- END switch_footer_links -->
</del>
</div>
</div>
</div>
{PROTECT_FOOTER}
<p class="center">
<strong>{ADMIN_LINK}</strong>
</p>
</div>
</div>
</div>
</div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});
FB.init({
appId : "{switch_facebook_login.FB_APP_ID}",
cookie : {switch_facebook_login.FB_COOKIE},
xfbml : {switch_facebook_login.FB_XFBML},
oauth : {switch_facebook_login.FB_OAUTH},
version : '{switch_facebook_login.FB_VERSION}'
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
$(document).ready( function() {
$('div.ti-connect').attr({
'data-loc' : '{switch_topicit_connect.TOPICIT_URL}',
'data-login' : '{switch_topicit_connect.BOARD_LOGIN}',
'data-version' : '{switch_topicit_connect.TOPICIT_VERSION}',
'data-lang' : '{switch_topicit_connect.BOARD_LANG}'
});
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Wed 5 Jun - 23:22
No, no the code box is exactly the way you want to display code so it doesn't use so much space. 
There may be some extra tweaking but I need to see if it works first.
Replace with this. Be sure to publish, too.
There may be some extra tweaking but I need to see if it works first.
Replace with this. Be sure to publish, too.
- Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<del>
<ul>
<li>
<!-- END html_validation -->
</li>
</ul>
<!-- BEGIN switch_footer_links -->
<ul>
<li>
<!-- BEGIN footer_link -->
<!-- BEGIN switch_separator --> | <!-- END switch_separator -->
{switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
<!-- END footer_link -->
</li>
</ul>
<!-- END switch_footer_links -->
</del>
</div>
</div>
</div>
{PROTECT_FOOTER}
<p class="center">
<strong>{ADMIN_LINK}</strong>
</p>
<div id="custom_chat"><script id="cid0020000220756308618" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 778px;height: 358px;">{"handle":"ninjavillagerebirth","arch":"js","styles":{"a":"000000","b":100,"c":"33ffff","d":"33ffff","e":"ffffff","k":"000000","l":"99ffff","m":"000000","n":"FFFFFF","p":"10","q":"000000","r":100,"sbc":"663366","cnrs":"0.35","fwtickm":1}}</script></div>
</div>
</div>
</div>
</div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});
FB.init({
appId : "{switch_facebook_login.FB_APP_ID}",
cookie : {switch_facebook_login.FB_COOKIE},
xfbml : {switch_facebook_login.FB_XFBML},
oauth : {switch_facebook_login.FB_OAUTH},
version : '{switch_facebook_login.FB_VERSION}'
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
$(document).ready( function() {
$('div.ti-connect').attr({
'data-loc' : '{switch_topicit_connect.TOPICIT_URL}',
'data-login' : '{switch_topicit_connect.BOARD_LOGIN}',
'data-version' : '{switch_topicit_connect.TOPICIT_VERSION}',
'data-lang' : '{switch_topicit_connect.BOARD_LANG}'
});
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Wed 5 Jun - 23:27
It worked! Thank you so much! Now if I want to center it is it the normal center tags?
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Wed 5 Jun - 23:31
Are you sure you want it just hanging on the bottom of the page like that? If you want, I can develop a button you can push at the bottom of the screen and have it appear and disappear every time you click it. That way it's not in the way. Let me know what you would like to do.
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Wed 5 Jun - 23:32
You can do something like that? :o That would be fantastic! If you don't mind I'd really appreciate that!
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Wed 5 Jun - 23:48
Add this script.
ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management > Javascript codes management
Title: Whatever you like.
Placement: All pages
ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management > Javascript codes management
Title: Whatever you like.
Placement: All pages
- Code:
$(document).ready(function() {
$("head").append(
"<style>#custom_chat{position:fixed;bottom:30px;right:0;display:none;}#showHideChat{background: #eee; color: #000; position: fixed; bottom: 0; right: 0; padding: 5px 20px; transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; -htm-transition: 300ms; -webkit-transition: 300ms;}#showHideChat:hover{background: #000; color: #fff; cursor: pointer; transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; -htm-transition: 300ms; -webkit-transition: 300ms;}</style>"
);
$("body").append(
'<div id="custom_chat"></div><button id="showHideChat">CHAT</button>'
);
$("#custom_chat").append('<script type="text/javascript" id="cid0020000220756308618" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 778px;height: 358px;">{"handle":"ninjavillagerebirth","arch":"js","styles":{"a":"000000","b":100,"c":"33ffff","d":"33ffff","e":"ffffff","k":"000000","l":"99ffff","m":"000000","n":"FFFFFF","p":"10","q":"000000","r":100,"sbc":"663366","cnrs":"0.35","fwtickm":1}}</script>')
$("#showHideChat").click(function() {
$("#custom_chat").fadeToggle(500);
});
});
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Thu 6 Jun - 0:02
That didn't work, do I need to remove the other code we had added before first?
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Thu 6 Jun - 0:03
I did edit and fixed the code after I found a slight error. Try the one I posted and see if that works.
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Thu 6 Jun - 0:06
Nope, no luck. 
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Thu 6 Jun - 0:07
Hmm... may I please have a test account with access to the admin panel? you can PM me the account details. Thanks!
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Re: Adding Chatango Chat box to the footer on every page
by Amira Lockeart Thu 6 Jun - 0:29
Details sent.
Amira Lockeart- New Member
- Posts : 9
Reputation : 1
Language : english -
Re: Adding Chatango Chat box to the footer on every page
by Draxion Thu 6 Jun - 2:26
Fixed by adding the script to the footer of the page and moving it to the element.
Problem solved & topic archived.
|
Draxion- Helper
- Posts : 2518
Reputation : 321
Language : English
Location : USA -
Similar topics» Chatango Chat
» Making Chatango Chat box not visible to guests
» Chatango bottom of my page on phpbb2??
» How to remove the @ in the Chat box/ How to make the default chat box on every page of forum?
» adding below footer
» Making Chatango Chat box not visible to guests
» Chatango bottom of my page on phpbb2??
» How to remove the @ in the Chat box/ How to make the default chat box on every page of forum?
» adding below footer
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
