Overview
Once you’ve chosen the Goal and the Audience for your In-App message, you’re ready to build it. You’ll have two options for designing a new message: using the Localytics Message Builder or upload your own ZIP file.
If your creative team has built you an in-app message, feel free to upload it with the File Uploader. If you run into trouble, head down to the File Uploader section for some best practices.
Otherwise, it’s time to use the Message Builder.
Message Builder
With the Localytics Message Builder, you can craft your own in-app message right from within your Dashboard. You can upload images, change the color and font, and include a call to action.
As you build the message, the preview on the page will adjust to your new designs. We also highly recommend that you test your message on a physical device before you set it live—we’ll talk about that later in this guide. (Click here to jump ahead.)
Name
First up, you’ll want to enter an optional name for your message. This name will allow you to differentiate between the Creatives if you choose to run an A/B test. You can also pull up these names for further data analysis after the message goes live.
Select Position
Next, you’ll want to select the positioning of your in-app message. In the Message Builder we give you four choices:
- Center
- Top Banner
- Bottom Banner
- Full Page Interstitial
Under each of these options, you’ll be able to further customize the layout of the message (in most cases this is choosing where an image might be positioned).
Choose Layout
After you’ve chosen the position, you’ll be able to choose the layout. Depending on the type of position you chose, the layout options will change.
For example, for a Center position you’ll have these layouts to choose from:
- Centered Image
- Left Image
- Right Image
- Centered No Image
- Background Image
Select Background
Next up, selecting the background. You can choose a single color for your background, or upload an image.
To change the color select a color from the color picker, paste in a hexadecimal color code, or paste in the corresponding RGB or HSB colors.
To upload an image you’ll need an image file that is smaller than 500KB. You’ll get the best results as follows:
- Center: 1200px by 1020px
- Banner (both Top and Bottom): 1280px by 200px
- Full page interstitial: 1280px by 2276px
As you change your design, you’ll see the phone preview change with each update.
Design and Edit Content
Next up, it’s time to design and edit the content of the in-app message.
All message position types include a Header and a text line (with the exception of the Full Page Interstitial). For the Centered position, you’ll have the option for an additional line of text, should you need it. And if you’ve chosen a layout that includes an image, you’ll see the opportunity to upload it here.
For an image, you’ll still need to keep it under 500KB. Both Centered and Banner images should be 240px by 240px.
Input your copy. Make sure to adjust the font, size, and color, if necessary. Keep an eye on the preview on the right hand side of the page to make sure things look good as you’re working.
Set Call to Action
You have the option to set a Call to Action for your in-app message. For this, you’ll need to write copy for the button and fill in a link for where the button should navigate to.
You’ll also see an option to change the button color (again with a color picker, hex code, RGB, or HSB code), the font face, and the style of the background. In this case, we give you two options—gradient and flat.
Key/Value Pairs
Finally, you can add a Key/Value Pair to your In-App Message. This is a great opportunity to:
- Send a custom image with a push message
- Connect a message to an order (ie, send periodic updates)
- Further customize your in-app messages
Read more about Key/Value Pairs here.
Preview
On the right side of the builder, you’ll see a preview of your in-app message. This preview will change as you craft your message.
You’ll also see a Preview button above the image. In Preview you’ll see a few different things.
The first is a mocked version of your in-app message on a phone in portrait orientation. You can rotate the device to see the message in landscape. You’ll also see the option to switch between a phone and a tablet.
Finally, the last option in preview allows you to view the in-app message on a physical phone or tablet using Test Mode. Scan the QR code with your phone’s camera and we’ll automatically open your app so you can view your creative.
Read more about Test Mode here.
Test Creatives
On the left side of the Message Builder, you’ll see a list of all of your creatives, and a small preview of each. Here you can delete creatives (by clicking the trash can, 🗑), clone creatives (with the Clone button), and set up your A/B tests.
A/B Testing
If you’re looking for more data and more creativity, we offer the option to A/B test your in-app messages. A/B tests are great if you’re not quite sure what your users respond best to.
To add another in-app message to your campaign, select the green + Add Creative button. Again, you’ll have the option to use the Message Builder or Upload a File.
To read more about A/B testing check out this doc.
File Uploader
Aside from building a message with the builder, you can also create your own HTML, CSS, and JavaScript to make your own in-app message. You’ll want to make sure this message is a single zipped file. We’ll unzip things on our side, so you can see the preview.
If you’ve used the In-App Builder, you’ll use the File Uploader to upload the zipped file you downloaded from the site.
Messages may be either single HTML files with all CSS and images base64 encoded and embedded inline, or zip files containing an index.html and any needed CSS, images, or JavaScript. The main HTML file must be called index.html, and the zipped file cannot contain any folders.
The zipped file has a max file size of 500KB.
If you run into any problems, try recompressing the file.
Continue to Scheduling
Once you’ve built or uploaded your Creative, it’s onto to the next step to send your campaign—scheduling. Click here to view.