Skip to main content

VistaCreate Editor API Documentation

API keys​

To use the VistaCreate Editor, you need to obtain an API key by submitting the form here.

How to add the editor to your website​

First, let's add the VistaCreate Editor API script to your page:

<script src="https://create.vista.com/js/frame_v2.min.js"></script>

It will add global VistaCreateEditor property for the window object. Using that property we can configure and open a VistaCreate Editor API with the minimal working sample:

<!DOCTYPE html>
<html>
	<body>
		<script src="https://create.vista.com/js/frame_v2.min.js"></script>
		<script>
			window.VistaCreateEditor.init({
				apiKey: "YOUR_API_KEY",
				designType: "facebookSM",
			});
		</script>
	</body>
</html>

Below you can see it in action:

const api = await window.CrelloEditor.init({
	apiKey: "VISTA-CREATE-DEMO-PARTNER",
	templateId: "646f178a125e0c29acdbb7d9",
	designType: "facebookSM",
});

Configuring Editor API​

To configure the appearance and behavior of the editor use init options. For example, you can choose the format of a new project, open an existing project, select a language, enable automatic user login, and provide a callback for final design publishing, etc. All available options are listed on this page. These options should be passed to the init() method:

window.VistaCreateEditor.init({
	...initOptions,
});

You can find init options usage examples and code snippets here

Triggering actions for initialized Editor API​

To trigger some actions e.g. addImages or textReplace use methods that are available for initialized editor instance:

const api = window.VistaCreateEditor.init(initOptions);

api.addImages(payload);
api.textReplace(payload);

Find out more about available methods here.

Usage scenarios are described in methods stories here

Saving the results​

To complete the flow, the user should click 'Export'(Publish) button and the iframe instance will render the result. Upon rendering completion, it will pass the payload data to the onPublishAction callback that was provided during initialization:

const api = window.VistaCreateEditor.init({
	...initOptions,
	onPublishAction: (data) => console.log(data),
});

See payload interfaces provided on the types page.

NOTE: Published URL is active for 1 day only