Integration on a project

You can integrate the CSV Import & Export into your application.

There are numerous ways for you to integrate our application in your project, but our suggestion (the most easy way) is to:

  1. Copy the whole application to your project.
  2. In your project, add an iframe to "call" the CIE on the page that you want.
  3. Add the iframe-resizer script next to the </body> tag.
  4. "Call" the iframe-resizer to the iframe you have added.
  5. Optionally you can remove the CIE navabar and sidebar if you already have one in your project.
Heads up! If you sell your project with the CSV Import & Export application, you need to purchase an Extended License on Envato.

Examples

Full integration with menu and sidebar

your_project_page.php

...

<body>

    ...

    <iframe id="iframe" src="csv-import-export/" frameborder="0" style="width: 100%; border: none;"></iframe>

    ...

    <script src="csv-import-export/vendor/iframe-resizer/iframeResizer.min.js"></script>
    <script>iFrameResize({log:true}, '#iframe')</script>

</body>
import-list.php (and all other files)

...

<body>

    <?php
    // NAVBAR & SIDEBAR
    $current_page = basename(__FILE__, '.php');
    include('navbar-sidebar.php');
    ?>

	<div id="main" class="with-navbar with-sidebar">

        <h1>Import list</h1>

        <div class="panel clearfix">
            <div class="panel-body">

                ...

            </div>  <!-- panel-body -->
        </div>  <!-- panel -->

        ...

One page integration without menu, sidebar and panel

your_project_page.php

...

<body>

    ...

    <ul id="my-project-menu">
        <li class="active"><a href="my-project-import.php">Import</a></li>
    </ul>

    ...

    <iframe id="iframe" src="csv-import-export/import.php" frameborder="0" style="width: 100%; border: none;"></iframe>

    ..

    <script src="csv-import-export/vendor/iframe-resizer/iframeResizer.min.js"></script>
    <script>iFrameResize({log:true}, '#iframe')</script>

</body>
import.php (and all other files)


...

<body>

	<div id="main">

        <!-- <div class="panel clearfix"> You could also removed this 2 lines and also the closing divs -->
            <!-- <div class="panel-body"> -->

                ...

            <!-- </div> -->  <!-- panel-body -->
        <!-- </div> -->  <!-- panel -->

        ...

Bootstrap

CIE is compatible with bootstrap. So, if your project is built on bootstrap and you want CIE to look a like your project, you just need to include your bootstrap.css.