Skip to main content

Page Blocks

Introduction​

Ditto is a powerful document editor for building web apps.

Within the editor, blocks are the "lego" pieces used to construct the content and behaviours of your app. All blocks are in plain English, making them easy to read and understand. Once you grasp what each block does, you can unleash your creativity and build custom apps in minutes!

Ditto blocks are categorised into two types:

  • Content: Displays content.
  • Behaviour: Composes app behaviour, including data, navigation, AI generation, and authentication.

Now, let's explore all the blocks released as of May 2024 and explain how you can use them to build your apps.

Content Blocks​

Hero​

The hero block is the first piece of content users see when landing on your app. It displays your app details, such as logo, cover image, title, headline, and call-to-action buttons for navigation. By default, this information is automatically populated based on your app details, but you can edit the title and headline within the block. Soon, you'll also be able to change the logo and cover images within the blocks. For now, add your images on the app details page.

Good Practices:

  • Clear Messaging: Ensure your headline clearly communicates your value propositions to keep users engaged.
  • Amazing Visuals: Use high-quality visual assets. If you don't have any, use our AI generation tool from your media library.
  • Call-to-Action: Provide a clear next step with CTA buttons, ensuring they are set up and pages are named clearly.

Heading​

A common content block type, similar to Notion or Google Docs, headings give your app a clear structure. You can type static text or add field values to create dynamic headings, offering a more tailored experience for your users.

Use Case: Use headings to segment different sections of your app, making the content more organised and navigable.

Text​

The most commonly used block in your app. You can type static text or use field values to display dynamic text.

Use Case: Use text blocks for paragraphs, descriptions, instructions, or any other textual content within your app.

Image​

Since users are visual, make sure to pair your text content with images for impact. If you lack design resources, generate images with our AI tool in the media library and paste them directly into the app editor.

Use Case: Use image blocks to showcase product images, illustrations, or any visual content that enhances your app's appeal.

YouTube​

Add video media to demo your product, showcase brand values, or tell a story. Simply input the video URL, preferably a YouTube link, though any publicly accessible video URL will work.

Use Case: Use YouTube blocks to embed promotional videos, tutorials, testimonials, or any relevant video content.

Map​

Embed an interactive Google map using plain text inputs or specific addresses. Populate the location with static text or field values to display locations dynamically.

Use Case: Use map blocks to display business locations, event venues, or any address-specific information.

Behaviour Blocks: Data​

Read Google Sheet​

This block allows you to retrieve data from a source, such as a Google Sheet (more integrations coming). Select a source, define the fields (columns) you want to use, and save the results as a table-typed field. The data is now ready to be used in other blocks.

Use Case: Use the Read Data Source block to pull data for product listings, user directories, or any dynamic content that requires external data sources.

Visually display data results saved as a table field. Connect the carousel block to your data by selecting the table name and mapping the relevant fields (image, title, and description). Combine static text with dynamic fields for titles and descriptions, but avoid mixing static text with image URLs to prevent issues.

Use Case: Use carousel blocks to create image galleries, product carousels, or any data-driven visual displays.

Read Global Field​

This block reads global field values to populate pages dynamically. It is typically paired with the "Save to Global Field" block for common use cases.

Use Case: Use the Read Global Field block to fetch user-specific data, settings, or any globally accessible information across your app.

Save to Global Field​

Save a page field value into a global field for access across your app. For example, save generated text from the "Generate Text" block and display it on a new page using the "Read Global Field" block.

Use Case: Use the Save to Global Field block to store user inputs, AI-generated content, or any data that needs to be referenced on multiple pages.

Behaviour Blocks: Actions​

Ask User​

Ask users a question and save their responses as a page field, creating a conversational form experience.

Use Case: Use the Ask User block for single-question surveys, feedback forms, or any interactive user input.

Form​

Similar to the "Ask User" block, the "Form" block collects information from users and saves responses as page fields. Unlike the conversational "Ask User" block, the "Form" block displays multiple fields simultaneously.

Use Case: Use Form blocks for detailed surveys, user registrations, or multi-field data collection.

Generate Text​

Powered by GPT-4o, this AI generation block outputs custom text content based on prompts. It can incorporate previously captured page field values or global field values, making the generated text context-aware and personalized.

Use Case: Use the Generate Text block to create personalized user messages, automated content generation, or any context-specific text output.

Send Email​

Send emails to static or previously saved email addresses. Define the subject line and body content, often using generated text tailored to the user.

Use Case: Use the Send Email block for notifications, marketing emails, or automated correspondence based on user actions.

A button that navigates users to a predefined page or external URL. You can choose to save or clear dynamic content generated on the current page when the user navigates back.

Use Case: Use Navigate Button blocks to direct users to different app sections, external sites, or to initiate specific actions within your app.

Goto​

Navigate users to a specific page within your app. Add up to five conditions which must be met for the navigation to occur. If no conditions are set, the navigation will happen immediately.

Use Case: Skip the user onboarding page if the user has already signed up, or redirect users to a specific page based on their input.

AI Q&A​

Display a text input for users to ask questions. Answers are provided by your built-in AI agent, referencing your knowledge source. Connect the appropriate knowledge source in the "AI Agent" tab of your app configuration. Place the Q&A input as a footer or at the end of your content.

Use Case: Use AI Q&A blocks to provide an interactive help section, customer support, or any information retrieval system powered by AI.

Behaviour Blocks: Auth​

User Login​

This block serves two main purposes:

  • Content & Access Gating: Blocks placed after this will not show up until the user is logged in.
  • User Authentication: If the user is not logged in, a signup/login UI block will be displayed for authentication.

Use Case: Use the User Login block to restrict access to certain app sections, enable user-specific content, or ensure authentication for secure interactions.