Adding Chatango Chat box to the footer on every page Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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.
The forum of the forums
3 posters

    Adding Chatango Chat box to the footer on every page

    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°1

    Solved Adding Chatango Chat box to the footer on every page

    Post by Amira Lockeart Wed 5 Jun 2019 - 22: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 2019 - 7:24; edited 1 time in total
    • Back to top
    brandon_g
    brandon_g
    brandon_g
    Manager
    Manager


    Male Posts : 10113
    Reputation : 923
    Language : English
    Location : USA
    • Post n°2

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

    Post by brandon_g Thu 6 Jun 2019 - 3: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



    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
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°3

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 3: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>
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°4

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

    Post by Draxion Thu 6 Jun 2019 - 3: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.
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°5

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 3: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. Smile
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°6

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

    Post by Draxion Thu 6 Jun 2019 - 4: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.
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°7

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 4: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 -->&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>
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°8

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

    Post by Draxion Thu 6 Jun 2019 - 4:22

    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>
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°9

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 4:27

    Smile It worked! Thank you so much! Now if I want to center it is it the normal center tags?
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°10

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

    Post by Draxion Thu 6 Jun 2019 - 4: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.
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°11

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 4:32

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


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°12

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

    Post by Draxion Thu 6 Jun 2019 - 4:48

    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);
      });
    });
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°13

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 5:02

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


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°14

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

    Post by Draxion Thu 6 Jun 2019 - 5:03

    I did edit and fixed the code after I found a slight error. Try the one I posted and see if that works.
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°15

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 5:06

    Nope, no luck. :/
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°16

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

    Post by Draxion Thu 6 Jun 2019 - 5:07

    Hmm... may I please have a test account with access to the admin panel? you can PM me the account details. Thanks!
    • Back to top
    Amira Lockeart
    Amira Lockeart
    Amira Lockeart
    New Member


    Posts : 9
    Reputation : 1
    Language : english
    • Post n°17

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

    Post by Amira Lockeart Thu 6 Jun 2019 - 5:29

    Details sent. Smile
    • Back to top
    Draxion
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA
    • Post n°18

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

    Post by Draxion Thu 6 Jun 2019 - 7:26

    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
    • Back to top