ActivePresenter Saola Animate Pricing Download

Using Saola Animate with a website page builder

(Ian Randell) #1

I have just found Saola Animate and it looks very interesting and would be a good addition to my web building capabilities.

I use a couple of different page builders when creating websites and was interested to know how I can use Saola Animate with these types of tools. I am guessing that we have to preload some CSS and Javascript and then the html code can be added into a code block or something along these lines. If you could clarify how to do this, I would appreciate it.

I look forward to hearing from you.

Kind regards,

Ian

1 Like
(Toan Le) #2

Hi Ian,

The first step after exporting is uploading entire exported folder to your web server.
After that, you can use iframe tag to embed Saola Animate content into your page, for example:

<div style="width:100%; padding-bottom:75%; position:relative;">
  <iframe src="path/to/Saola Animate/HTML file" style="position:absolute; top:0px; left:0px; width:100%; height:100%; border: none; overflow: hidden;"></iframe>
</div>

As you may already know, the outer div in the above code with padding-bottom style is used to keep the aspect ratio for the iframe content. Please update its style depending on your content aspect ratio (see https://danieljones.design/css-aspect-ratio-calculator/ for more detail).

In case you want to show Saola Animate content directly inside your page (without using iframe), please open its HTML file in a text editor and copy parts of its content as follows into your page:

  1. The player script:
    <script type="text/javascript" src="slplayer.js"></script>
  2. The content inside the body tag, e.g.
    <!-- you may need to add styles for Container_ID div to suit your need -->
    <div id="Container_ID" style="position: relative; height: 100%;"></div>
    <script type = "text/javascript">
      // script to load Saola Animate content into Container_ID div
      (function(Saola) {
        var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
        Saola.openDoc('path/to/Saola Animate/content JavaScript file', 'Container_ID', {paused:false, preloaderOptions: li, center: 'horizontal'});
      })(AtomiSaola);
    </script>

Please be noted that you can change Container ID, Resource folder, even the content of the output HTML in Document pane in the editor.

Regards

1 Like
Add exported files to wordpress