Layers are elements displayed in the customer’s personalized image, such as images, text, QR codes, and barcodes.

Text Layer #

• Purpose: Displays a text segment in the personalized image, such as name, date, phone number, address, or customer attributes from the chatbot.
• Position: Adjust the position of the text layer relative to the image (left margin and top margin in px).

• Size: Adjust the width and height of the text layer. Center the text layer by setting the left margin to 0px and the width to match the image width.

Alignment Options: #

• Vertical Alignment:
  • Top
  • Center
  • Bottom
• Horizontal Alignment:
  • Left
  • Center
  • Right

You can combine alignment styles, for example:

• Top alignment + Left alignment for the top-left corner.
• Bottom alignment + Right alignment for the bottom-right corner.
• Value: The displayed text content can be specific or use customer attributes, e.g., {{facebook.name}}, {{phone}}, {{email}} for personalized experiences.

• Font and Size: Adjust the font and size to fit the image.
• Textbox Margins: Similar to page margins, you can position the text inside the textbox (the green frame around the image).

Image Layer #

• Purpose: Displays an image. You can use the attribute {{facebook.picture}} for the customer’s avatar or upload a specific image.
• Position, Size, and Alignment: Same as the text layer.
• Value:
  • Upload: Select a file from your computer.
  • Attribute: Choose an attribute from SmaxAI to display.

You should adjust the width and height of uploaded images to ensure complete visibility. The system will support a preview field for attributes.

• Shape:
  • Normal: Displays according to the specified width and height.
  • Circle: Displays the image in a circular shape.
  • Square: Adjusts to form a square based on the shorter side.
• Border: Add a border to the image, customizing color and thickness.

QR Code Layer #

• Purpose: Converts text (including URLs) into a QR code.
• Position, Size, and Alignment: Same as the text layer.
• Value: Input the text or URL to convert into a QR code.
• Color: Customize the display color of the generated QR code.

Barcode Layer #

• Purpose: Functions similarly to the QR code layer.

Layer Arrangement #

When creating layers in the personalized image, arrange them logically to avoid obscuring important visuals. Layers are displayed in order from top to bottom. For example:

• The Text layer on top will overlay the two Image layers below.
• Image Layer 2 (right cat) arranged above Image Layer 3 (left cat) will partially cover the latter.