Facebook Instant Experience components

30/11/2019

Adding components

Below, you'll find a breakdown of how to add each of the available components. Remember that none of them are required and they can be put in almost any order. Take a look at our design recommendations for website click and website conversion ads with Instant Experience, broken down by component, for more information.

Tips:

  • You can add multiple component types at once by clicking the Add Component button, selecting each of the component types you want to add and clicking OK.
  • Throughout Instant Experience creation, use the preview on the right side of the Instant Experience Builder to make sure that you're satisfied with how everything looks.

Adding a header

A header is an image that appears (and remains fixed) at the top of your Instant Experience. If it doesn't fit the width of the screen, you can select a background colour to fill the empty space. Unlike other Instant Experience components, you can only have one header and it has to be at the top of the Instant Experience.

Note: When creating a new Instant Experience, one of the default components is a header. However, you don't have to have one, and can delete it by clicking the trash can icon in the header component section.

To add a header to your Instant Experience:

  1. Click the Add Component button.
  2. Select Header.
  3. Click OK.
  4. Click the Upload Image button and select the image you want.
  5. Adjust the Background colour and Opacity fields as needed.

Adding a photo

A photo is a single image that you can add to your Instant Experience.

Note: When creating a new Instant Experience, one of the default components is a photo. However, you don't have to have one, and can delete it by clicking the bin icon in the photo component section.

To add a photo to your Instant Experience:

  1. Click the Add Component button.
  2. Select Photo.
  3. Click OK.
  4. Click Upload Image and select the image you want
  5. Choose how you want the image to display on the screen.

Adding a button

Buttons contain links that take people who tap them off Facebook and your Instant Experience to the site that you enter in the Button link field.

Note: When creating a new Instant Experience, one of the default components is a button. However, you don't have to have one, and can delete it by clicking the bin icon in the button component section.

To add a button to your Instant Experience:

  1. Click the Add Component button.
  2. Select Button.
  3. Click OK.
  4. Complete the Button text (what the button says), Button link (where you want it to take people who click it) and Button colour fields.

Adding a Carousel

A carousel is a series of "cards" with images and (optionally) links that people viewing your Instant Experience can swipe through. Each image should be the same size. Each card can have the same link or different links. Tapping an image will send people to the link's URL.

Important: If you want to add a link to a carousel card, you must select the Fit to width option for that card's image.

Tip: In the preview on the right of the Instant Experience Builder, you can click, hold and drag the carousel to go through it.

To add a carousel to your Instant Experience:

  1. Click the Add Component button.
  2. Select Carousel.
  3. Click OK.
  4. Add (up to 10 total) or remove (down to one) carousel cards until you have the amount you want.
    • To add carousel cards, click .
    • To remove a carousel card, select the number of the card you want to delete and click Remove.
  5. For each card, click Upload Image and select the image you want.
  6. Tip: If you want to change the card's image, click Update Image.

  7. Choose whether you want your images to fit the width or the height of the screen on the device of the person viewing your Instant Experience
  8. Note: Whichever choice you make applies for each card in the carousel. You can change your choice for any card and it will change it for all of them.

  9. If you choose Fit to width and want to add a link, click Add link and enter the URL in the URL (Optional) field.

Adding a text block

A text block is a space to add text to your Instant Experience.

To add a text block to your Instant Experience:

  1. Click the Add Component button.
  2. Select Text block.
  3. Click OK.
  4. Enter the text you want and format as needed.

Adding a video

To add a video to your Instant Experience:

  1. Click the Add Component button.
  2. Select Video.
  3. =
  4. Click OK.
  5. Click Upload Video and select the video you want.
  6. Choose how you want the video to display.

Adding a product set

A product set is a selection of products from your catalogue that dynamically displays the ones that will drive the highest sales.

Important: You can add a product set to your Instant Experience once you've uploaded a product catalogue and have the Facebook pixel set up correctly.

You can create the product set itself within the product catalogue or create one in the Instant Experience Builder. Learn how to create a product set within the product catalogue and get tips on creating product sets.

To create a product set in the Instant Experience Builder:

  1. Click next to the product set drop-down.
  2. Enter your product set's name in the Name new product set field.
  3. Add the filters you want.
  4. Click Create.

To add a product set to your Instant Experience:

  1. Click the Add Component button.
  2. Select Product Set.
  3. Click OK.
  4. Select the catalogue your want to choose from the drop-down.
  5. Select the product set you want to choose from the drop-down.
  6. Enter the maximum number of products that you want to appear in your Instant Experience (no more than 40)

Note: We automatically determine the order in which the products on your Instant Experience are displayed based on performance.

Adding a shop locator

A shop locator is a component that directs people to your shop based on their current location.

Important: To add a store locator to your Instant Experience, you'll need to have Locations enabled for your Pages. Learn more about Locations. The store locator component isn't available when creating an Instant Experience from your Page.

To add a store locator in the Instant Experience Builder:

  1. Click the Add Component button.
  2. Select Shop locator.
  3. Click OK.
  4. Choose a light, dark or a custom colour for the header of your shop locator map card.
  5. Select your preferred font from the drop-down menu.

To add a store locator to an existing Instant Experience, select the published Instant Experience from your list of available Instant Experiences. Click the eye icon to view it, select duplicate to create a new draft of the Instant Experience that you can edit. Select add component to add a store locator to the Instant Experience.

Note: The store locator will always appear at the end of an Instant Experience. When people tap to get directions, the shop locator will open the default map application for their device.

Arranging your components

Once you've added all the components you want to your Instant Experience, you can change the order they're arranged in by clicking next to each component section. You can also click to delete a component.

Finishing

Make sure that you click Save Draft throughout Instant Experience creation so you don't lose any work. You can also save to come back and finish later.

Important: Don't click Finish until you're sure that your Instant Experience is finished. Learn more.

If you're happy with it, click Finish. You'll then be given a URL you can use for Page posts, Mobile App ads, Website Click ads and Website Conversion ads.

Now that you've created a

Important: Don't click Finish until you're sure that your Instant Experience is finished. Learn more.
, learn how to use it in an ad.

* Nguồn: Facebook