Create a Custom-Shaped Display

The most common display shapes used for displays are square, rectangle, and circle. Each of these shapes is easily implemented via the display designer. However, your creativity doesn't need to stop there. Combining a transparent background with a background image means that your displays can take on all kinds of non-traditional shapes and styles.

Swap between default shapes

Before you use custom shapes, it's best to know how to swap between the default square, rectangle, and circle shapes offered by the display designer. To swap between these default options and tweak their settings: 

• Navigate to Convert > All Displays and select the display you want to edit. 
• In the Create step of the display builder, select the Design card (e.g., Popup Design). 
• In the display designer, select the Background option from the sidebar. 

From here, edit the width, height, colors, border, and rounding of the display. Based on your starting point, you can swap between a square or rectangle to a circle by enabling or disabling the Circular background checkbox. 

Use a custom-shape

To create a custom-shaped display, you need an image, preferably a PNG, of the desired shape. Once you have the desired image ready, follow these steps to create your display: 

• Navigate to Convert > All Displays and select the display you want to edit. 
• In the Create step of the display builder, select the Design card (e.g., Popup Design). 
• In the display designer, select the Background option from the sidebar. 
• In the Background section, set the display's background color to transparent. To do this, set any A value in an RGBA color to 0 or move the transparency slider all the way to the left. 
• Next, click the Choose Image button in the Background section and upload/select the desired custom shape. If you see an unexpected checkered background associated with an image, the background included in the file wasn't truly transparent. You must edit the file to remove the checkered area or find a new file with no background. 

Here, edit the alignment, size, width, height, overlay, and other display settings. Depending on the size of your custom shape, you may need to select the Edit Background button at the top of the sidebar to access the display's other elements (e.g., Form and text) so they fit appropriately. 

Additional changes

Depending on your custom shape, you may want to remove additional default design elements for your display. For example, the X icon is used to close the display. If you'd like to make this type of change, check out this guide concerning custom display coding.