​
Creating Surfaces

Once you know the Surface elements you would like to personalize and have any necessary creative assets prepared, you’re ready to create the Surface in Aampe.
  • Not sure if you’re ready to create a Surface? Read up on preparing your content for Surfaces.
The steps to create a Surface include:
  • Creating and reviewing all the fields we’d like to include in the API payload
  • Creating variants for all of those fields
  • Assigning specific events to measure the impact of Surfaces (optional)

​
Creating and Reviewing Surface Fields

This step can also be completed via Figma’s Aampe Surface Creator. See here for instructions on using the Aampe Surface Creator in Figma.
Within the Aampe composer, navigate to the Surfaces section.
  • Click “Create Surface” to bring up the following form
Surface Setup Pn
  • When naming the Surface, keep in mind that the Surface may include content for multiple page components.
  • Frequency Guardrails allow you to require a minimum amount of time to elapse before showing Surface content again. (e.g. You want to show the personalized message more more than once a week, even if the user opens the screen many times a day).

​
Creating Fields via Surface Templates

If you have a ready-made template, feel free to select it. A template is simply a list of fields and is unrelated to the message variants that will eventually populate those fields. You can also create the list of fields directly by selecting + Create Custom from the Surface Template menu. In this example, we have a template called ‘Fitness App’ that we made previously. Surfaces Demo Composer Template1 Pn After reviewing the list of fields, we are ready to attach message variants.

​
Creating Surface Templates

If you do not have a template to use and would like to create one, navigate to the Surfaces > Templates page in the Aampe Composer
  • Click Create Template to bring up the following screen Surfaces Demo Createtemplate2 Pn
  • Add each field you want returned when calling the Surfaces API
  • Save the template

​
Attaching Content to Surface Fields

A Surface needs at least 1 message, and that single message can have many variants.

​
Adding a Message

  • After saving your template, click + Message to bring up the following form.
  • Choose an appropriate name, audience, and labels (optional)
Surface Demo Message1 Pn You will have the option later on to add additional messages. Assigning multiple messages to a Surface allows you to
  • Add additional content without manipulating existing messages and variants
  • Create content for specific audiences
  • Ensure elements of the page are thematically consistent (e.g. if you want a picture of a dog to appear with subtitles that mentions dogs)

​
Adding Message Variants

Creating message variants within Surfaces is generally the same as creating message variants for Push, Email, or SMS (see here to review how to create messages and variants for outbound messages).
  • Write your first text in each field
  • Highlight components each field to add variants and apply labels (this enables experimentation and learning)
For visual elements (e.g. button color), your variants may be a single word, color codes, image urls, or numbers for size or positioning variables. Surfaces Demo Messages3 Pn
Image field types are currently unable to create variants. If you want to create variants of image urls, simply use a generic single-line text field.

​
Select Funnel Events

Saving your messages brings you an optional step of selecting specific events to associate with this funnel.

If your Surface is inviting users to complete a daily lesson, make a purchase, or refer a friend, you can choose the event that aligns with that specific goal. Surfaces Demo Funnel Events1 Pn

​
Review API Results

Saving the Funnel Events brings you to the final Review screen which demonstrates how you would call the Surfaces API to retrieve intelligent content combinations for a specific user. On this page, you’ll find details for calling the API directly, as well as for connecting the API to assets managed by Braze. Surfaces Demo Review API Pn The API Response on the screen is for illustrative purposes only (hence the “sample value” placeholders), but will make it easier for developers to start integrating the Surface into the intended frontend experience. 
[
  {
    "surface_id": "7a6070e3-9217-4480-a530-6ea6a90ebcac",
    "assignment_id": "b022b907-d607-4055-b69a-3dea450ec4ae",
    "n_alternates": 1,
    "control": {
      "min_gap_days": 1
    },
    "alternates": [
      {
        "alternate_assignment_id": "c0858305-9b10-42a6-95cf-6d92af3b69ed",
        "subtitle": "Sample Value",
        "button-color": "Sample Value",
        "button-text": "Sample Value",
		"image-url": "Sample Value"
      }
    ]
  }
]

​
Ready to Integrate Surfaces into Your Product?

See our developer guide for instructions on how to embed Surface content into your application.