Adding Chatango Chat box to the footer on every page

Go down

Solved Adding Chatango Chat box to the footer on every page

Post by Amira Lockeart on 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 on 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 music - Adding Chatango Chat box to the footer on every page Brando10
Remember to mark your topic adding music - Adding Chatango Chat box to the footer on every page Solved15 when a solution is found.
brandon_g
brandon_g
Manager
Manager

Male Posts : 8675
Reputation : 781
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 on 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 on 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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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>


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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);
  });
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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!


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
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 on 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 on 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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as adding music - Adding Chatango Chat box to the footer on every page Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

adding music - Adding Chatango Chat box to the footer on every page Draxio14
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2392
Reputation : 303
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top


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