Drag & Drop Builder

Introduction

1. Drag & Drop Custom Fields: Match the fields you need with your design template effortlessly.

2. Generate Unique Content: Use our advanced features like Variables, Spin Syntax, and Generative AI to make content dynamic, personalized, and completely non-duplicated.

3. Export Your Content: Export your data as JSON for front-end integration or CSV for CMS uploads.

Before You Start: Have Your Design Template Ready

• Your template determines what fields (like text, images, rich text..) you’ll need to drag and drop.

• It helps you stay organized and ensures your final export (JSON or CSV) integrates seamlessly with your CMS or front end.

How to Use the Drag & Drop Builder

1. Prepare Your Design Template: Identify the fields (text, images, rich text..) you need and have your template ready as a guide.

Let’s take an example: Imagine you’re creating a Services Page.



You’ll need:

• A title for the page (e.g., {{section1_heading_text}})).
• A banner image (e.g., {{section1_image}}).
• A description of the page (e.g., {{section1_subheading_text_area}}).
• etc..

2. Drag & Drop Fields: Add the necessary fields into the workspace and arrange them to match your design.

Continuing with our example: For the Services Page, you’ll:

• Use the default Single Line Text field for the title: {{section1_heading_text}}.
• Drag an Image URL field for the banner: {{section1_image}}.
• Drag a Multiline Text field for the description: {{section1_subheading_text_area}}.
• etc.



💡
Important Note:
The title field is critical and cannot be renamed or deleted. This field determines the number of pages that will be created based on your variables.
For example:
• If you have 1 variable with 9 rows in your dataset, it will generate 9 pages.
• If you have 2 variables (e.g., city and service), it will generate 81 pages (9 rows × 9 rows).
• etc.
For all other fields, you must:
• Rename each field to match your content.
• Use snake_case naming (lowercase words separated by underscores).
• Make sure each field name is unique to avoid conflicts.

3. Create Content: Use features like Variables, Spin Syntax, and Generative AI to create dynamic, unique, and personalized content.

Still using the Services Page example: Fill in your fields with content:

4. Preview & Export: Review your work, then export it as JSON or CSV based on your needs.

Wrapping up the example: Once your content template for the Services Page is ready, export your content:

• As JSON: This format is perfect for front-end integration, allowing your developers to dynamically render the page. Here's an example of how the output might look:

[
  {
    "section1_heading_text": "Experience Top-Rated Yoga Classes in Chicago",
    "section1_image": "https://example.com/chicago.jpg",
    "section1_subheading_text_area": "Start your yoga journey in Chicago with our experts instructors and peaceful studio atmosphere."
  },
  {
    "section1_heading_text": "Experience Top-Rated Yoga Classes in Los Angeles",
    "section1_image": "https://example.com/losangeles.jpg",
    "section1_subheading_text_area": "Start your yoga journey in Los Angels with our experts instructors and peaceful studio atmosphere."
  },
  {
    "section1_heading_text": "Experience Top-Rated Yoga Classes in New York",
    "section1_image": "https://example.com/newyork.jpg",
    "section1_subheading_text_area": "Start your yoga journey in New York with our experts instructors and peaceful studio atmosphere."
  },
  ...
]

• As CSV: This format is ideal for uploading to your CMS or managing data in bulk. Here's an example of how the output might look:

section1_heading_text	section1_image	section1_subheading_text_area
Experience Top-Rated Yoga Classes in Chicago	https://example.com/chicago.jpg	Start your yoga journey in Chicago with our experts instructors and peaceful studio atmosphere.
Experience Top-Rated Yoga Classes in Los Angeles	https://example.com/losangeles.jpg	Start your yoga journey in Los Angels with our experts instructors and peaceful studio atmosphere.
Experience Top-Rated Yoga Classes in New York	https://example.com/newyork.jpg	Start your yoga journey in New York with our experts instructors and peaceful studio atmosphere.
…	…	…

Here’s how the pages might look once the data is used to generate your content:

Contact and Support