Adding Chatango Chat box to the footer on every page

by Amira Lockeart June 5th 2019, 10:54 pm

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!

by **brandon_g** June 6th 2019, 3:33 am

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

by Amira Lockeart June 6th 2019, 3:37 am

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>

by Draxion June 6th 2019, 3:47 am

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.

by Amira Lockeart June 6th 2019, 3:55 am

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. Smile

by Draxion June 6th 2019, 4:04 am

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.

by Amira Lockeart June 6th 2019, 4:11 am

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::  <!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>  </li> </ul>  <ul> <li>   |  {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>  </li> </ul>  </del> </div> </div> </div> {PROTECT_FOOTER} <p class="center"> <strong>{ADMIN_LINK}</strong> </p> </div> </div> </div> </div>  <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>   <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>  <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> </body> </html>

by Draxion June 6th 2019, 4:22 am

No, no the code box is exactly the way you want to display code so it doesn't use so much space. Wink

There may be some extra tweaking but I need to see if it works first.

Replace with this. Be sure to publish, too.

Code::  <!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>  </li> </ul>  <ul> <li>   |  {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>  </li> </ul>  </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>  <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>   <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>  <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> </body> </html>

by Amira Lockeart June 6th 2019, 4:27 am

It worked! Thank you so much! Now if I want to center it is it the normal center tags?

by Draxion June 6th 2019, 4:31 am

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.

by Amira Lockeart June 6th 2019, 4:32 am

You can do something like that? :o That would be fantastic! If you don't mind I'd really appreciate that!

by Draxion June 6th 2019, 4:48 am

Add this script.

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); }); });

by Amira Lockeart June 6th 2019, 5:02 am

That didn't work, do I need to remove the other code we had added before first?

by Draxion June 6th 2019, 5:03 am

I did edit and fixed the code after I found a slight error. Try the one I posted and see if that works.

by Amira Lockeart June 6th 2019, 5:06 am

Nope, no luck.

by Draxion June 6th 2019, 5:07 am

Hmm... may I please have a test account with access to the admin panel? you can PM me the account details. Thanks!

by Amira Lockeart June 6th 2019, 5:29 am

Details sent. Smile

by Draxion June 6th 2019, 7:26 am

Fixed by adding the script to the footer of the page and moving it to the element.

Problem solved & topic archived.

Please read our forum rules: ESF General Rules

Adding Chatango Chat box to the footer on every page