Smart Canvas: Build In-App Experiences Without Code

Whether you're sharing a new feature, guiding users through onboarding, or just want to add helpful info to your app — Smart Canvas gives you the power to do it visually, with zero coding required.

What is Smart Canvas?

Smart Canvas is a visual builder that lets you create beautiful, interactive content right inside your product. Think of it like a digital whiteboard where you drag and drop elements — text, images, buttons, videos — and turn them into announcements, workflows, or any kind of in-app message.

What Can I Build with It?

You can easily build:

• Product announcements with images and buttons

• Onboarding guides that walk users through a flow

• Feature highlights for new or hidden gems

• Training steps with helpful visuals and videos

The Smart Canvas Interface: What’s What

Instead of step-by-step instructions, here’s a quick tour of the Smart Canvas layout and tools so you can dive right in:

Main Canvas (Center)

Your live editing area. This is where you build and preview your design in real time.

Layers (Left Panel)

Displays a list of all elements you've added (text, image, button, etc.).
Use it to: Organize, reorder, or quickly select components.

Tools Panel (Right Side)

This is where all your design magic happens. It has four main tabs:

1. Blocks

These are your building blocks. Drag any of these onto the canvas to get started:

• 1 Column / 2 Column / 3 Column / 2 Col 3/7 – Layout structures.
  Use: Define how content is arranged on the canvas.

• Text – Simple text box.
  Use: Add body text, descriptions, or general content.

• Link – Clickable hyperlink.
  Use: Redirect users to a URL or page.

• Image – Add static images.
  Use: Logos, product photos, banners.

• Video – Embed video content.
  Use: Tutorials, or product demos.

• Heading – Bold text for titles.
  Use: Section headers, attention grabbers.

• Divider – Horizontal line.
  Use: Separate sections or content blocks.

• Button – Clickable action item.
  Use: CTAs like “Accept” or “Learn More”.

2. Traits

Once you've added a block to the canvas, the Traits tab lets you customize the actual content — like what the button says, what URL a link goes to, or what video plays. Just click the component on the canvas to view and update its traits.

Example: Click a button you’ve added to the canvas — then use Traits to edit the label (e.g., “Get Started”) or insert a link.

a. Column

• ID – (Pre-filled, editable)

• Title – Optional label, for internal reference

b. Text

• ID – (Pre-filled, editable)

• Title – Content you want to display

c. Link

• Title – The clickable text

• Href – The URL to open

• Target – Choose whether the link opens in:

  • This Window

  • New Window

d. Image

• Alt Text – Describes the image (for accessibility)

e. Video

• Provider – Choose the video source:

  • HTML5 Source – Upload or link to a local video file (e.g., .mp4)

  • YouTube – Embed standard YouTube videos

  • YouTube (No Cookie) – Privacy-focused embed that avoids YouTube cookies

  • Vimeo – Embed Vimeo-hosted videos

• Source – The video file URL

• Poster – A preview image shown before the video plays (e.g., ./media/image.jpg)

• Autoplay – Start the video automatically

• Loop – Replay the video continuously

• Controls – Show/hide video playback controls

f. Heading

• ID – (Pre-filled, editable)

• Title – The heading text

g. Divider

• ID – (Pre-filled, editable)

• Title – Optional (can be left blank)

h. Button

• Label – Text that appears on the button

• Action – What happens when it’s clicked:

  • Accept – Confirm or continue

  • Dismiss (Temporary) – Hide the message for now

  • Dismiss (Permanent) – Hide the message and don’t show again

• Launch Content – Add an additional action:

  • None

  • Workflow – Start a specific flow

  • Knowledge Content – Open help content or articles

3. Layout

Control the size and spacing of your blocks:

• Width / Height – Resize elements

• Margin – Add space outside elements

• Padding – Add space inside elements

4. Style

Make everything look on-brand.

Typography

• Font Family / Size / Weight – Text appearance.
  Use: Match your branding or emphasize content.

• Letter Spacing / Line Height – Text spacing.
  Use: Improve readability and style.

• Text Align – Align left, right, center.
  Use: Format text layout.

• Text Shadow – Adds shadow to text.
  Use: Visual depth or highlight.

Decorations

• Background Color – Set component background.
  Use: Highlight or theme match.

• Border Radius – Round the corners.
  Use: Soften block edges.

• Box Shadow – Shadow around the block.
  Use: Create depth or separation.

• Border Width / Style / Color – Customize borders.
  Use: Frame or define blocks.

Extra

• Opacity – Transparency level.
  Use: Subtle visibility effects.

• Transition – Smooth animation on state change.
  Use: Make style changes look fluid.

• Transform – Rotate, scale, or move components.
  Use: Add creative design effects.

Pro Tips

• Reuse layouts by duplicating canvases

• Use layer view to manage complex designs

• Preview before publishing so nothing goes live prematurely

• Need help? Reach out to your platform team or Apty Support.