Magic Squares

Responsive interface elements that can display your content in a unique way. You can use it for displaying images, videos, maps, products, services or anything else that you can imagine.

Download Script »

Intro

Magic Squares are responsive interface elements that can display your content in a unique way. You can use it for displaying images, videos, maps, products, services or anything else that you can imagine (any HTML-content, except JavaScript). Visit our live preview to see how Magic Squares can serve your purposes. Magic Squares are colorful squares glued to window edge. As an administrator you can fully configure them: set size, color, background texture, icon, position, content, etc. Magic Squares can be easily integrated into any website, even into plain HTML-page (no more difficult than insert Facebook Like button, check out steps 5-6 in "Installation" paragraph).

Features

Front End Demo

You can see Magic Squares on this page (left and right edge).

Admin Panel Demo

You can try admin panel:
URL: http://halfdata.com/pluto/magic-squares/
Login: admin
Password: admin

Installation

Let's imagine that you have website http://www.website.com/ and you want to install script there.

  1. Create folder magic-squares (use any other name) in root of your domain. Once created it can be reached by URL: http://www.website.com/magic-squares/
  2. Edit inc/config.php and set MySQL database parameters.
  3. Go to admin panel http://www.website.com/magic-squares/ using default login/password (login: admin, password: admin), configure script on Settings page and create at least one campaign on Campaigns page.
  4. Make sure that your website loads jQuery. If it doesn't, just add this line into head section:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  5. Add these lines into head section (before </head> tag):
    <link href="//www.website.com/magic-squares/css/ums.css" rel="stylesheet">
    <script src="//www.website.com/magic-squares/js/ums-jsonp.js"></script>
  6. Add shortcode (from Squares page) at the bottom of the page (before </body> tag). Example:
    <div class="ums" data-id="X"></div>

Requirements

Support

If you have problems regarding using the script, please contat me and I'll help you.