How to change the face outline to your own

As you know adding a face outline to your recorder is super easy. All you need is to add faceoutline parameter. A quick example of it would look like so:

<ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="green"
    ziggeo-faceoutline>
</ziggeorecorder>

Now it shows a nice general outline that you can quickly set up and use.

One of our customers wanted to know how to do it for a car as that made more sense for their use case. The truth is that if you are willing to go into just slightly more advanced things, you could have anything for face outline.

In that light, we made few to show how you too could change it up if your really wanted.

To help us do this, we prepared a woman outline, man outline, car and yacht outlines.

First however, let's talk about what is the purpose of the outline for those that might not yet be familiar with it.

The purpose of the outline is for you to specify where the end-user should position themselves within the video for best recording.

It helps people recording themselves to not:

1. cut off the top part of their head
2. be too close to the left and right edges of the video
3. be too far from the camera
4. move out of the original place during recording

These are all easy to do, and just a simple guide helps you point out the same, making you aware. This is for example helpful for candidates applying to a job or submitting their resumes. It is just the same good to know where to place someone in your shot for other things like cars, food, etc.

The image you would use as outline can be anything. This is completely up to you. You pick the thickness, the line type and the color.

What we would recommend is saving them into .svg format as that would allow it to be shown in any resolution without change in quality.

If you are not sure how to do that, or having preference, then a .png file would be just as good. The .gif file format should work as well if it is transparent.

What you should not use is any file format that lacks transparency such as the .jpg file format.

After that you would need to upload the image to some location that you can access over the network. This would generally be somewhere on your host, like your website is.

The codes you would use are quite simple. There is no JavaScript needed, just a few lines of CSS. This will help us hide the original faceoutline and in the same time show the new one.

Your only change would be the link to the image itself. Once you make this copy paste change, you are ready to go and record away.

First we hide the original faceoutline image

ba-videorecorder-faceoutline svg {
    display: none;
}

Next, we show our own image in the place of the original one. We would do that using:

ba-videorecorder-faceoutline {
    background-image: url('https://YOUR_WEBSITE.COM/YOUR_IMAGE.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

You would change the "YOUR_WEBSITE.COM/YOUR_IMAGE.svg" with the URL to your own image.

So what is the complete code that you would add to your website?

Well we added 4 examples for you to check out bellow.

You will see the recorder and then the actual code right under it.

<ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="green"
    ziggeo-faceoutline>
</ziggeorecorder>
<style>
  ba-videorecorder-faceoutline svg {
    display: none;
  }
    ba-videorecorder-faceoutline {
        background-image: url('https://YOUR_WEBSITE.COM/YOUR_IMAGE.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

<ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="green"
    ziggeo-faceoutline>
</ziggeorecorder>
<style>
  ba-videorecorder-faceoutline svg {
    display: none;
  }
    ba-videorecorder-faceoutline {
        background-image: url('https://YOUR_WEBSITE.COM/YOUR_IMAGE.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

<ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="green"
    ziggeo-faceoutline>
</ziggeorecorder>
<style>
  ba-videorecorder-faceoutline svg {
    display: none;
  }
    ba-videorecorder-faceoutline {
        background-image: url('https://YOUR_WEBSITE.COM/YOUR_IMAGE.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

<ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="green"
    ziggeo-faceoutline>
</ziggeorecorder>
<style>
  ba-videorecorder-faceoutline svg {
    display: none;
  }
    ba-videorecorder-faceoutline {
        background-image: url('https://YOUR_WEBSITE.COM/YOUR_IMAGE.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

The great thing about CSS is that if you copy paste the code above to your website, you will immediately see the change applied to all of the recorders on that page. So you have the option of setting it up per page or globally for all recorders, just depending on where you add your CSS codes.

Wait, now how is that each example has a different faceoutline? The trick is in the CSS. All you need really in CSS is to specify the element ID or class within which the recorder is in. It would depend on many different things how you could get this info, however it is generally very simple for any designer or developer (even those that just started) to help you with the same.

Of course, we would be happy to assist as well so do try to record a video above, use the code on your website and let us know how it goes.

The code above would look very similar in other flavors of JavaScript, so here they are. Please do just note that you should still add CSS as you would above, this is just for the embedding itself to use faceoutline.

Vanilla Javascript

    <div id="recorder"></div>
    <script>
        ziggeoApp.on("ready", function() {
            var recorder = new ZiggeoApi.V2.Recorder({
                element: document.getElementById("recorder"),
                attrs: {
                    theme: "cube",
                    themecolor: "green",
                    faceoutline: true
                }
            });

            recorder.activate();
        });
    </script>

React

  <ZiggeoRecorder
    apiKey={API_KEY}
    ziggeo-theme={'cube'}
    ziggeo-themecolor={'green'},
    ziggeo-faceoutline={true}
  />

To see more about React JS check out our docs here.

VueJS

  <ziggeo-recorder
    :apiKey="API_KEY"
    :theme="cube"
    :themecolor="green",
    :faceoutline="true"
  ></ziggeo-recorder>

To see more about VueJS check out our docs here.

Angular

  <ziggeo-recorder #ziggeorecorder
    [apiKey]="API_KEY"
    [options]="{theme: 'cube', themecolor: 'green', faceoutline: true}"
  ></ziggeo-recorder>

To see more about Angular check out our docs here.