Choreograph Create Template Extension
This Visual Studio Code Extension is used to quickly create, preview and export Templates to Choreograph Create.
In six easy steps, the wizard will output all source files with direct links to assets and code snippets required for a functionial Advertising Template. These features are available to you within the environment you use to develop, preview and test your Templates.
Index
Getting started
Installation guide
Open your Visual Studio Code editor.
Open the Extensions Panel on Visual Studio Code's Activity Bar.
Shortcuts: CMD + SHIFT + X for Mac, CTRL + SHIFT + X for Windows
Search for Choreograph Create Template Extension in the Extension Panel in Visual Studio Code and install it from there.
Your Extension should be successfully installed. A new icon for the Extension should appear at the bottom of Visual Studio Code's Activity Bar.
Note: The icon will look like four circles in a similar pattern to ::.
Customizing your Visual Studio Code user interface
You can customize your Visual Studio Code User Interface layout by moving the Choreograph Extension to wherever want, by simply dragging the Extension's Icon to your desired location within Visual Studio Code. This has the benefit of allowing you to have your workspace open at the same time as the Extension.
Note: You can reset the exention's location by right clicking on it's icon or title, then selecting reset location.
Possible configurations are:
No customisation
The Extension view ìn a separate view in the Primary Side Bar, separate from your Explorer view.
Dragging your extension into the Explorer View
A combination of your Explorer view and the extension view on the Primary Side Bar.
Dragging your extension onto the Secondary Side Bar
The Extension view on Secondary Side Bar separate from your Explorer view.
Creating a template boilerplate
Click the new icon to open the Extension, which should appear on the bottom of Visual Studio Code's Activity Bar.
Push the Create boilerplate button in the Primary Side Bar.
Complete the wizard to generate your first Template Boilerplate.
Note: See the Boilerplate Generation section for a step by step guide to the wizard.
Edit the look and feel of your Template within your development environment.
Export your Template directly to Choreograph Create, or as a .zip and upload to your desired location.
Note: You can find your Templates in Choreograph Create within Manage, in the Templates section directly under your selected Advertiser. The most recent uploads will be displayed at the top of the list.
Features
Boilerplate generation
A simple wizard will output the perfect boilerplate for your Advertising Template, including all required metadata, configurations and javascript dependencies. The wizard has the following steps:
Name
Give the Template your desired name, which will be the reference used to find it once uploaded.
Workspace
Choose your local workspace selection where your Template files will be developed.
Creative size
Set the dimensions of your Advertising Template
Advertiser selection
Connect to an Advertiser to easily import assets and data.
Note: You are able to switch Advertisers at any point in the process.
Placeholders
Quickly create new and/or import placeholders directly from existing Adsets and automatically generate the correct configuration in Template.json, which will be generated upon preview or export.
Fonts
Import fonts from Advertisers to generate easy font usage in CSS and HTML, which will be injected in the markup and CSS upon preview or export.
Note: Switching Advertisers after selecting a font will cause the font from the original Advertiser to be removed. You are only able to upload a Template using a custom font from an Advertiser if the Advertiser has the correct license for the font.
Previewing
Local preview
The Extension enables easy previewing within your preferred development environment. To preview your Templates locally, another Extension is required. If you already have one installed for this purpose you can continue to use that, if you don't already. Check the Dependencies section for recommended Extensions to use.
Note: How to preview your local Template depends on which Extension you are using. If you are using the Live Server Extension recommended, the action Go Live can be found on the blue status bar at the bottom of your Visual Studio Code editor. When clicked, it will start a local server, open your browser and show a live preview of your code.
Exporting
You can quickly create a local or direct export to Choreograph Create using the actions on the Primary Side Bar of the Extension.
Local export
Exporting locally creates a .zip package on your local machine. This .zip file can then be shared or manually uploaded.
Direct export
Exporting a Template directly to Choreograph Create will immediately upload your Template to the Advertiser you have selected in the wizard step. It can be found under the same name you've given your Template in the Extension .
You are able to overwrite existing Templates with a new revision.
Dependencies
Choreograph Account
The Choreograph Create Template Extension requires an active Choreograph Create account to be able to access adset placeholders, fonts stored on the platform and be able to upload the template directly.
Preview plugin
To preview your Templates locally, another Extension is required. If you already have one installed for this purpose you can continue to use that, if you don't already, we recommend using either the following:
Name: Live Server
Id: ritwickdey.LiveServer
Description: Launch a development local Server with live reload feature for static & dynamic pages Version: 5.7.9
Publisher: Ritwick Dey
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Name: Live Preview
Id: ms-vscode.live-server
Description: Hosts a local server in your workspace for you to preview your webpages on.
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
Output
Some attributes required for a functional Advertising Template are injected on the moment of export due to avoid any conflicts when users edit the source files. The injected attributes include the following:
- Ad size metadata
- Creative Libraries reference
- Font reference(s)
The file output of the Extension is as follows:
Template
│
└───plugin (This folder will not be included in your export)
│ │ plugin.js
│ │ settings.json
│
└───src
│ creativeScript.js (Starting point for your Template's Javascript)
│ index.html (Starting point for your Template's Markup)
│ style.css (Starting point for your Template's CSS)
Support
Please contact our support team via Zendesk.
