https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aa7cb770-4231-4665-ba05-1431971fe8bc/Untitled.png

The Layout section allows you to customize the general aspect of your template.

In there, you will find selectors for making your in-app messages fullscreen, round your template corners, change your close button aspect, turn on dark mode, and more.

Selectors:

General

  1. Name: name your template to find it when creating an in-app message.
  2. Modal vs Fullscreen: turn your template from a pop-up to a responsive fullscreen IAM.

Note 1: Devices have different screen heights. To be responsive to all devices, B.Layer makes the image component fill the gaps by default. Visit the section Example: fullscreen modes to learn more about all the possibilities for the fullscreen templates' layout.

Note 2: turning your template into fullscreen will automatically add media queries in the CSS+ section to handle tablet responsiveness (prevents stretching the IAM on tablet screens, the IAM will show up as a pop-up on tablets).

  1. Background image: Adds a background image to your template that can be added when creating an IAM with this template. Disables the background color.
  2. In-app corners: Increase the px number to round your template corners even more: 1px will be square, 50px will be very round
  3. In-app width: Increase the width of your modal template. We recommend a width of 320px to fit with all screen sizes.
  4. Background color: change the template's background color. Compatible with any color, hex codes, rgb, rgba, css gradients, and plain css colors. Is disabled if background image is on.
  5. Padding Top: Increase/decrease the space at the top of your template. In px, %, vw, or vh.
  6. Padding bottom: Increase/decrease the space at the bottom of your template. In px, %, vw, or vh.
  7. Padding left: Increase/decrease the space on the left of your template. In px, %, vw, or vh.
  8. Padding right: Increase/decrease the space on the right of your template. In px, %, vw, or vh.

Cross button

  1. Close button - circle width: change the size of the close button circle. In px. Write "0px" to make it disappear.
  2. Close button - circle background-color: change the color of the close button circle. Write "transparent" to make it disappear.