Wordpress

Personalise and automate your video content

Enhance your video content with the Moovly WordPress plugin. Add template-based forms to engage your website visitors and transform your blogging into a captivating customer involvement.

The aim of the WordPress plugin is to make the installation as easy as possible. Nevertheless some decisions were made to require some prerequisites which you should check before you start using the plugin.

These can all be found in your PHPInfo. If your hosting provider grants you access to this page you can use it. If you don't have access, you can try to install the PHPInfo() plugin.

Our prerequisites are:

  • PHP version larger than 7.0
  • cURL module enabled

Installing the plugin can happen in two ways. Both equally straight forward.

  • You can add a new plugin from within your Wordpress installation by going to Plugins > Add New and searching for 'Moovly',
  • You can download the plugin here and upload it to your installation.

If you want to change the style of the form, or change the width of a project video, you'll be happy to know that all shortcodes support the attributes width and class.

[moovly-post-video width='480px' class='some-great-parent-class']

Once you have enabled the WordPress plugin in the Plugins section of your install, you'll have to go to the Moovly settings page.

Since we need to verify who you are, you'll have to provide your Personal Access Token. The Moovly plugin wont't be enabled before you enter that token. Don't have a token yet? No problem! Head over to our Personal Access Token page on the Developer Hub.

You'll have to login with your Moovly account, create a new token and copy it to the field. To start exploring, just hit save and see new sections pop up in the Moovly section.

[moovly-templates]

Display all available templates
[moovly-templates type={optional:type} detail-endpoint={optional:detail-endpoint} ]

This will display a video player with a preview and title for every available template.

  • type (optional):
    • personal This shows only your personal templates
    • user-shared This shows all templates shared with your account
    • group-shared This shows all templates that are shared with the group
    • public This shows all the public templates
  • detail-endpoint (optional): if provided every template title will link to this url path with the template id as a query parameter. On that page you can use that template id to display only that template with [moovly-template id='query'].

[moovly-template]

Display template with a form
[moovly-template id={required:id} width={optional:html width} class={optional:css class} publish-to-youtube={optional:1} create-project={optional:1} create-render={optional:1} ]

This will display a video player with a preview and a form to enter the variable data to generate a video.

  • id (required): the template id or query if you get the template id from the query parameter in the url via the [moovly-templates] shortcode.
  • publish-to-youtube (optional): if set to 1 we will automatically upload all generated videos to the Youtube account that is linked to your Moovly account.
  • create-project (optional): if set to 1 we will create a project in your Moovly account for each form submission.
  • create-render (optional): if set to 1 we will generate an mp4 render for each form submission


[moovly-projects]

Display all available projects
[moovly-projects type={optional:type} detail-endpoint={optional:detail-endpoint}]

This will display a video player with a preview and title for every available project.

  • type (optional):
    • all This shows all your available projects
    • shared This shows all your shared projects
    • archived This shows all the archived projects
  • detail-endpoint (optional): if provided every project title will link to this url path with the project id as a query parameter. On that page you can use that project id to display only that project with [moovly-project id='query'].

[moovly-project]

Display a project in video player
[moovly-project id={required:id} width={optional:html width} class={optional:css class}]

This will display a video player for a specific project.

  • id (required): the project id or query if you get the project id from the query parameter in the url via the [moovly-projects] shortcode.

[moovly-renders]

Display all renders
[moovly-renders project-id={optional:id} allow-delete={optional:allow-delete} view-type={optional:view-type}]

This displays all the renders for a project or all the renders ever done

  • project-id (optional): if set then this will only display the renders of the specified project, otherwise it will display all renders.
  • allow-delete (optional): disabled by default. If set to 1 this will allow users to delete individual renders.
  • view-type (optional): grid (default) | list


[moovly-remaining-credits]

Display the remaining amount of credits
[moovly-remaining-credits]

You will be limited to a maximum of 25 videos created while experimenting with our API. Please contact us for a limit increase of your credits.

4.1 Create template

The Moovly API needs templates to create videos from, and templates are created from projects. So before trying anything, go to the Moovly dashboard and create a new project.

Once you have the Moovly editor open, you'll be able to add videos, photos and text. If you are happy about the structure of your video, add some placeholders (this could be text, but also video or images) to be replaced.

If the placeholders are there, select them and enable the template options for those objects.

Change the settings that are available to you for the template and change the name of the variable. This is important for the form that will be rendered.

Once you are done, save your project and close the editor. You have a Moovly project now, but not yet a template. To do this, open the Project details page and create the template by clicking on the button and verify by clicking on 'Save as new template'.

4.2. Use template as forms

Now that you have a generic template, you'll be able to put it in your posts and pages. To do so, find the template shortcode by navigating to the Templates section of the plugin.

Copy the shortcode.

Paste the shortcode in your page and publish your page.

View your form based on your template. If you feel a bit groovy, you can test your form! You'll be able to see a preview of your template if you have a finished render of your project before you make it a template.

4.3. Sending video via email

Sending the video to the form submitter

The templates by default will not ask for an email address to the form submitter. This results in the user having to wait on the page until the render is done. This might not always be the best UX for the form submitter. When you create the template on the Moovly Dashboard, you'll be prompted with a checkbox if you want to 'Send result to form submitter'.

If you are creating a template to have a form out of it, we suggest you check this box. Because when it is checked, you'll be able to set some options to customise the email that will be sent to the form submitter.