Announcing the Canvas Ads Dialog

We recently announced that Canvas has been renamed to Instant Experiences, to better reflect the value it delivers for people as a full-screen, post-click destination that loads nearly instantaneously from ads in News Feed. We'll soon updated the Canvas Ads APIs to reflect this change. In the interim, consider all subsequent references of “canvas” to represent “Instant Experience”.

With Canvas Ads, you can help drive an advertisers' objectives by creating visually appealing, fullscreen experiences.

Since the Canvas Ads APIs are complex and frequently updated, we've created the Canvas Ads dialogs that you can trigger from your website. These dialogs can take your advertisers directly into the native Canvas Ads creation flow with Facebook's ads tools. As an added benefit, you can now integrate Canvas Ads into your flow without any API calls or having your advertisers navigate away from your website.

Launch the Canvas Ads Dialog

The Canvas Ads dialog uses the Facebook JavaScript SDK. See a full list of our dialogs at JavaScript SDK, Dialogs. Once you have the JavaScript SDK installed and initialized, you can launch the Canvas Ads dialog from your website with the call below:

FB.ui({
display: 'popup',  
method: 'canvas_editor',
business_id: '<BUSINESS_ID>',
page_id: '<PAGE_ID>'
}, function(response) {    
console.log(response);   
});

Once an advertiser created a Canvas Ad, Facebook sends a response:

{
"success": true,
"id": "<CANVAS_ID>"
}

The ID is the Canvas Ad ID. If you close the window before someone finishes creating the Canvas Ad, there is no response. Once you have a response, this means the Canvas Ad is created and published and ready to be used in a Facebook ad campaign.

When you launch the Canvas Ad dialog, Facebook takes the login of the person creating the ad from the dialog to determine if they can create a Canvas Ad for the given business and page. The ad creator must have create ad permissions for that Facebook page and be in Business Manager for the business. If not, the dialog displays an error.

To learn more about all parameters, see Canvas Ads Dialog.

Create Collection Ads

Collection Ads show multiple products and services in a Canvas Ad format. Your advertisers can use the same Canvas Ad dialog to also create Collection Ads. Along with the usual parameters, you must include an ad account ID and a template ID. See the list of templates in Canvas Ads, Templates.

For example:

FB.ui({
display: 'popup',  
method: 'canvas_editor',
business_id: '<BUSINESS_ID>',
page_id: '<PAGE_ID>',
account_id: '<AD_ACCOUNT_ID>'.
template_id: '<TEMPLATE_ID>'
}, function(response) {    
console.log(response);   
});

On success, Facebook returns a response:

{
"success": true,
"id": "<CANVAS_ID>"
}

This ID is the Canvas Ad ID. However, unlike the other Canvas Ads creation flow, this Canvas Ad is not published and needs to be published before the advertiser can run it. If you close the window before completing the Canvas Ad creation, there will be no response.

To learn more about all parameters, see Collection Ads Dialog.

Preview a Canvas Ad

Whether you're creating Canvas Ads using the dialog or the API, or getting Canvas Ads IDs from the API, you can provide a preview of the Canvas Ad. Because previewing a Canvas Ad requires less information and we don't want to show editing options, we have a separate panel in the Canvas Ads Dialog. To display it in our website, make this call:

FB.ui({
display: 'popup',  
method: 'canvas_preview',
canvas_id: '<CANVAS_ID>',
});

Then you can provide the preview in your website, for example:

We hope the Canvas Ad Dialogs help your advertisers try more of Facebook's rich ad formats and see improved results. Stay tuned for more dialogs as we look to ease ads development and help you adopt our newest features.