The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Adding Chatango Chat box to the footer on every page

3 posters

Go down

Solved Adding Chatango Chat box to the footer on every page

Post 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!


Last edited by Amira Lockeart on June 6th 2019, 7:24 am; edited 1 time in total
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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


Adding Chatango Chat box to the footer on every page Brando10
Remember to mark your topic Adding Chatango Chat box to the footer on every page Solved15 when a solution is found.
General Rules | Tips & Tricks | FAQ | Forgot Founder Password?

Adding Chatango Chat box to the footer on every page Scre1476
Team Leader
Review Section Rules | Request A Review | Sticker Points
brandon_g
brandon_g
Manager
Manager

Male Posts : 10112
Reputation : 923
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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>
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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:
<!-- 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 -->&nbsp;|&nbsp;<!-- 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
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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:
<!-- 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 -->&nbsp;|&nbsp;<!-- 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
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

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

Smile It worked! Thank you so much! Now if I want to center it is it the normal center tags?
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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!
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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);
  });
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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?
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

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

Nope, no luck. :/
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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!
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

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

Details sent. Smile
Amira Lockeart
Amira Lockeart
New Member

Posts : 9
Reputation : 1
Language : english

http://ninjavillagerebirth.forumotion.com/

Back to top Go down

Solved Re: Adding Chatango Chat box to the footer on every page

Post 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
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum