Installing Guidelines

The components installation guidelines and best practices for your developers team.

Quick start

Install the folder "bites" from the archive bite.zip to your website root directory and choose the bite needed from the list on Home Page and insert it to the code in web-document and css file.

CSS

Install following components to <head> of your web-document.

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i,700i" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />

    <!-- Animate CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

    <!-- Bites Theme CSS -->
    <link rel="stylesheet" href="bites/css/bites-theme.css" />

Path to the css file, if your website is on Wordpress CMS

<!-- Bites Theme CSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/bites/css/bites-theme.css" />

JS

Put the following components before the closing </body> of your web-document.

<!-- jQery JS library v.3.3.1 minified -->                   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap Bundle JS v.4.3.1 minified -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <!-- Bites JS -->
    <script type="text/javascript" src="bites/js/bites.js"></script>

Path to the JS files, if your website is on Wordpress CMS

    <!-- Bites JS -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/bites/js/bites.js"></script>

Bites Installation (example)

The bite is puting inside <body>

    <!-- The Modal -->
    <div class="modal fade timeoutshow* m-width-570" bite-timeout="0"* id="bite-1" bite-show="fadeIn" bite-hide="fadeOut">
        <div class="modal-dialog animated fast">
            <div class="modal-content text-center">
                <!-- Modal header -->
                <div class="modal-header">
                    <button type="button" class="close close-light" data-dismiss="modal"></button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    ...
                </div>
            </div>
        </div>
    </div>

Here you can see this bite work demonstration:

* - timeoutshow and bite-timeout="0" required for the test demonstration of the bite on your website

If your website is on Wordpress CMS, then the path to the image in bite looks like this:

    <img src="<?php echo get_template_directory_uri(); ?>/bites/images/logo.png" srcset="<?php echo get_template_directory_uri(); ?>/bites/images/logo@2x.png 2x" alt="" />

Or:

    <img src="/wp-content/themes/your-theme/bites/images/logo.png" srcset="/wp-content/themes/your-theme/bites/images/logo@2x.png 2x" alt="" />

Where your-theme is theme installed in Wordpress

How you can launch the bite

The bite can be launched for the different reasons (these are triggers). It depends on your purposes.

Launching after some time

    <div class="modal fade timeoutshow m-width-570" id="bite-demo-timeoutshow" bite-timeout="10" bite-show="fadeIn" bite-hide="fadeOut">...</div>

To be launched your bite need to include timeoutshow class and attribute bite-timeout="10" You can see the example above. Launching time is calculated in seconds.

This is important: the bite is launching one time during the session.

Launching when button was pressed

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-demonstration text-white" data-toggle="modal" data-target="#bite-demo">Demo</button>
                                    
    <!-- Bite modal -->
    <div class="modal fade m-width-570" id="bite-demo" bite-show="fadeIn" bite-hide="fadeOut">...</div>

This is important: data-target attributes of the button and popup id need to be equal.

Launching after several clicks were made in the document area

    <div class="modal fade fewclicksmodal m-width-570" id="bite-demo-fewclicksmodal" bite-show="fadeIn" bite-hide="fadeOut">...</div>

To be launched your bite need to include fewclicksmodal class.

This is important: the bite is launching one time during the session.

Launching when user is trying to close the document

    <div class="modal fade closedoc m-width-570" id="bite-demo-closedoc" bite-show="fadeIn" bite-hide="fadeOut">...</div>

To be launched your bite need to include closedoc class.

This is important: the bite is launching one time during the session.

Launching when scrolling the document

    <div class="modal fade scrollshow m-width-570" id="bite-demo-scrollshow" bite-show="fadeIn" bite-hide="fadeOut" displayed="false">...</div>

To be launched your bite need to include scrollshow class and displayed="false" attribute. You can see the example above. After that you need to set up the point where bite is going to be launched: put the html-tag with scrollshowpoint class to the place needed or add the scrollshowpoint class to the existing html-tag. When user is scrolling to this html-tag, the bite is launching.

This is important: the bite is launching one time during the session.

Animation

You can set up the launcind and closing animation of the bite.

<div class="modal fade m-width-570" id="bite-demo" bite-show="fadeIn" bite-hide="fadeOut">...</div>

This function is proceeded by changing the bite-show and bite-hide attributes bite-show и bite-hide

Animation work's examples

bite-show="fadeIn" bite-hide="fadeOut"

Location

There are 9 positions you can use to locate the bite (Default location: Top Center)

<div class="modal fade position-top-left m-width-570" id="bite-demo" bite-show="fadeIn" bite-hide="fadeOut">...</div>

Add following classes to the bite

Working examples

Location class: position-top-left

Options

You can use backdrop option to switch on or switch off the background (it is switched on by default: data-backdrop="true")

    <div class="modal fade m-width-570" id="bite-demo" data-backdrop="false" bite-show="fadeIn" bite-hide="fadeOut">...</div>

Working examples

Make several clicks on the document area
Try to close browser window
Scroll the page down
Wait several seconds