# In-App Messages

In-App messages grab a lot of user attention and allow you to easily communicate with your users via announcements, offers, etc., and prompt actions.

{% embed url="<https://youtu.be/KQWqoBRWA0w>" %}

### Top Banner

This template sticks to the top of your app screen and allows a title, description, icon, and upto two buttons.

* You can choose whether to include a image icon in the template or not.
* You can select either 1 or 2 number of CTA buttons.
* You can also dim the background.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FqAyuzYFRIiB9YZvDaCHW%2FHeader.gif?alt=media&#x26;token=cacbdfc5-3f55-48e6-ac1c-cc7f72f443c3" alt="" width="375"><figcaption></figcaption></figure>

### Footer

This template sticks to the bottom of your app screen and allows a title, description, icon, and upto two buttons.

* You can choose whether to include a image icon in the template or not.
* You can select either 1 or 2 number of CTA buttons.
* You can also dim the background.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FSOJSEb9NO3Bna9tFwd1n%2FFooter.gif?alt=media&#x26;token=bbcb41bd-f439-49b6-aa66-8a2d58bdd6c3" alt="" width="375"><figcaption></figcaption></figure>

### Center Modal

The Center Modal template is a great option for drawing attention to a specific message or offer. It includes an image, title, and up to two buttons, and can be customized to show just the image if desired. This template looks like a pop-up and is perfect for prompting users to take action.

* If you are using just the image option then the CTA actions of dismiss, redirect and cancel will be applicable on tapping the image.
* You can also dim the background.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2F6gghMLfxm7R0Vuv2mzzm%2FModal%20Popup.gif?alt=media&#x26;token=4eaf1d66-07dd-4eea-bdfc-1ddbbe8efaf6" alt="" width="375"><figcaption></figcaption></figure>

### Full Screen Cover

The Full-Screen Cover template is ideal for displaying larger images and messages. It takes over the entire screen of your app and includes a title and up to two buttons.

* If you are using just the image option then the CTA actions of dismiss, redirect and cancel will be applicable on tapping the image.
* You can also dim the background.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FUgHogjyoVjtRQYWLAfP9%2FFullScreenModal.gif?alt=media&#x26;token=04fb21f3-f63b-481d-8283-4924f2a39ce1" alt="" width="375"><figcaption></figcaption></figure>

### Carousel

This template allows you to create an in-app slideshow with a maximum of 5 images

* You can also dim the background

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FG2RYCAkD920pzkYbosJi%2FCarousel.gif?alt=media&#x26;token=282af2d5-f996-419f-84fa-aeffde2faafd" alt="" width="375"><figcaption></figcaption></figure>

### Custom HTML

{% embed url="<https://youtu.be/_zh5FdeuiMU>" %}

The custom HTML option allows for even more flexibility in designing in-app messages. With this option, you can create your own template using HTML and CSS. This is a great option for those who want complete control over the design of their in-app messages. You can also customize various aspects of the in-app message, including the container design, CTAs, text, and effects, to ensure that your message is eye-catching and effective.

### Customizations

<details>

<summary>Design</summary>

</details>

<details>

<summary>Text</summary>

* Font Size and Color
* Custom Font (any font that is an asset of the app)
* Font Style (Italic, Bold, Strike Through)
* Localized Formatting: Customize different parts of your text in various formats. Split into your desired number of lines etc.
* Dynamic Text: We can read and present any of the values of
* * User properties
  * Session Properties
  * UI element in the front end
  * Response from an API call
* Dynamic Script: We can perform the mathematical and logical operations between the values read from the above 4 sources using a few lines of code.

</details>

<details>

<summary>Effects</summary>

* Auto Dismiss after X seconds
* Dim Background
* Waiting time for rendering: Useful in screen stabilization

</details>

## Create a mobile campaign

Go back to creating a [mobile campaign](https://guides.apxor.com/product-guides/create-a-campaign/mobile).