Quick Start

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
Choose your application

Since you're not logged in we'll create an application for you.

No need to sign up for an account, just click Start to continue.

Note:
  • Applications created in Quick Start are temporary and personal to this computer
  • Videos created in Quick Start can't be saved or shared with others
  • You won't have access to a personal dashboard without an account

To get access to all features sign up for a Free Account.

Don't have a website? We've got you covered!

HEADER CODE

To install Ziggeo and start your application you need to add this code inside your page's <head></head> tag:

<link rel="stylesheet" href="//assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="//assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
  var ziggeoApp = new ZiggeoApi.V2.Application({
    token: "",
  });
</script>

The header code can be edited to customize the application. You could, for example, change the application's default language. Click here for more information.

Important: Your unique application token.

We have auto-generated this application token. It identifies your Ziggeo application and all associated videos. It is personal to you.

Notes:
  • You need to run this code on a server -- URLs starting with file:// will not work. See here.
  • This temporary application will only work on localhost and ziggeo.com. Sign up for a free account here to share with others or publish to the Internet.

Use this code to display the recorder on your webpage: 

<ziggeorecorder
  ziggeo-timelimit=15
  ziggeo-width=320
  ziggeo-height=240
  ziggeo-theme='modern'
  id='myRecorder'
></ziggeorecorder>

Decoding the Code:

  • Recording time is limited to: 15 seconds
  • The size of the embedded recorder is: 320x240
  • Recorder is using the modern theme.
  • We specify the HTML element ID to allow us to find the recorder and attach events to it.
  • Click on the following link for the full list of customization parameters.

There are also other embedding methods you can use to embed the recorder to your page.

Video tokens and Javascript Events

Every video recorded with Ziggeo has it's own unique token, which you can later use to locate the video and display it on your page. The easiest way to retrieve the token of a recorded video is by listening for the verified event. This is triggered after the video is uploaded and verified that it can be processed.

Place the following <script> near the end of your page, right before the closing </body> tag, to listen for the verified event.

<script>
ziggeoApp.on("ready", function() {
  // Let's get the ziggeorecorder element reference
  var element = document.getElementById('myRecorder');

  // Now let's get the actual Ziggeo embedding / object that we can use
  var recorder = ZiggeoApi.V2.Recorder.findByElement(element);

  // Now you can listen for the verified event
  recorder.on("verified", function() {
    var videoToken = recorder.get('video'); // Video token is available after the event is triggered
    alert("The video with token " + videoToken + " has been submitted!");
  });
});
</script>

There are other events you can listen to, which will help you customize the behavior of the recorder. Click here for a list of embedding events.

Here is the token of the video we have just recorded:

Here is the video you just submitted.

Use this code to display the player on your webpage: 

<ziggeoplayer
  ziggeo-video=''
  ziggeo-width=320
  ziggeo-height=240
></ziggeoplayer>

Decoding the Code:

  • It is set to play video with token:
  • The size of the embedded player is: 320x240
  • The player is also fully customizable.

There are also other embedding methods you can use to embed the player to your page.

The player also has a list of events you can listen to, which will help you customize it's behavior.

Automate the display of videos by querying Ziggeo for the list of all recorded videos.

Option 1: Install one of our server-side SDKs to obtain a list of videos.

Option 2: Use Javascript on the client-side to dynamically display videos using e.g. JQuery. To do that you could copy this code: 

<script>
ZiggeoApi.V2.Application.getDefault().videos.index().success(function (videos) {
    for (var i = 0; i < videos.length; ++i)
        $("body").append("<ziggeoplayer ziggeo-video='" + videos[i].token + "'></ziggeoplayer>");
});
</script>
Note: This is disabled by default for security purposes. See here.

To enable indexing through the client (browser) follow these steps:
  1. Log into your account
  2. Click on the application that you will use (we create one for you named "default")
  3. Under it click on Manage
  4. Now switch to "Authorization Settings" section
  5. Make sure that the checkbox next to "Allow client to perform index operation" is checked
  6. Save your changes
  7. It will now work for you

Congrats! You have just completed Ziggeo's Quick Start Tutorial.

Can you believe how simple it was? In just 6 steps, you chose your application, got the needed header, recorded your video and played it back. Next to that, you already know how to create your own videos gallery and everything with few simple lines of code! Of course, this is just scratching the surface of what you can actually do.

Did we tickle your imagination? Do you have any questions? If you do just let us know by contacting us over email: support@ziggeo.com. Were are here to help and be there for you as you go through each step, so extend your hand and reach out to us when needed.

Sign up for a FREE account on Ziggeo - you can try out all our features and get your own personalized dashboard.

Sign up for Ziggeo