Login  Register

Re: Chat Box/PM?

Posted by Mencey Melgar on Sep 10, 2014; 11:22am
URL: https://support.nabble.com/Chat-Box-PM-tp7591363p7591409.html

Hi there,

I recommend you to use http://www.yourshoutbox.com/ since it's pretty simple and efficient. I added it to my website, if you want to take a look: http://forum.sniperjum.com/

To add this, you have to follow this steps:

1. Create an user at http://www.yourshoutbox.com/users/register
2. Create and personalize your shoutbox at http://www.yourshoutbox.com/shoutboxes/create
3. Check prices http://www.yourshoutbox.com/shoutboxes/pricing

As you can see, you have to pay to have private messages but the rest works pretty good.

4. Go to your forum and click at "Edit this page" (at bottom-right)
5. Click at the config wheel at the top-left of the window and "Search macros"
6. Search for the "html" macro and go to its link.
7. Once you are looking the html macro, click at "Override this macro".
8. Copy this code and paste it at the html macro:
<override_macro name="html" parameters="head,body">
    <n.html_impl>
        <head>
            <link rel="shortcut icon" href="http://185.14.184.159/images/perpeq.png" type="image/x-icon" />  
            <n.head/>  
        </head>
        <body>
            <n.top_bar/>
            <n.body/>
            <n.nabble_footer/>

            <div class="div-shoutbox" style="bottom: 0; right: 0; position: fixed; border: 1px solid white; border-bottom: 0px; background-color: black; border-radius: 10px; border-bottom-right-radius: 0;border-bottom-left-radius: 0;">
                <div class="top-shoutbox" style="text-align: left; color: white; font-weight: bold;padding-left: 10px;font-size: 20px; border-bottom: 1px solid white;">
                    <a href="#" class="minimize" style="color: white">-</a>
                    <a href="#" style="color: white;margin-left: 110px;">Shoutbox</a>                </div>
                <div class="div-shoutbox-box">
                    HERE YOUR SHOUTBOX SCRIPT
                </div>
            </div>
            <script type="text/javascript">
                $(".top-shoutbox").click(function() {
                    event.preventDefault();
                    min_max();
                });
                $(".minimize").click(function() {
                    event.preventDefault();
                    event.stopPropagation();
                    min_max();
                });
                $(".manual").click(function() {
                    event.preventDefault();
                    event.stopPropagation();
                });
                function min_max() {
                    var min = Nabble.getCookie("min");
                    if (!min) {
                        $(".div-shoutbox").animate({
                            height: 50
                        }, 800);
                        Nabble.setCookie("min", true);
                    }
                    else if (min) {
                        $(".div-shoutbox").animate({
                            height: 485
                        }, 800);
                        Nabble.deleteCookie("min");
                    }
                }
                $( document ).ready(function() {
                    var min = Nabble.getCookie("min");
                    if (min) {
                        $(".div-shoutbox").css("height", "50px")
                        Nabble.setCookie("min", true);
                    }
                });
           </script>
        </body>
    </n.html_impl>
</override_macro>

9. Change "HERE YOUR SHOUTBOX SCRIPT" inside this code for your own shoutbox script (yourshoutbox.com will give you this script). For example, my script is:
<script type="text/javascript" src="http://www2.yourshoutbox.com/shoutbox/start.php?key=326307766"></script>
10. Click at "Save changes" and your shoutbox should be added!
:) Helper