Text and Button Blocks

NextSteps, a powerful digital tool supported by the Jesus Film Project, allows you to create interactive journeys for sharing the gospel and engaging your audience. This guide will walk you through the process of editing card properties and adding interactive blocks to your journey cards.

Understanding Blocks in NextSteps

Blocks are the interactive components that make up your journey cards. They allow you to add various elements such as text, buttons, and other interactive features to engage your audience effectively.

Adding Blocks to Your Card

To add a block to your card:

  1. Click on the "Add Block" button within your card editor.
  2. A list of available blocks will appear, allowing you to choose the type of block you want to add.

Working with Text Blocks

Text blocks are versatile and can be used for titles, descriptions, or questions. Here's how to add and customize a text block:

  1. Select "Text Block" from the list of available blocks.
  2. Click on the text field to start typing your content.

Customizing Text Blocks

You can customize your text block in several ways.  Font and Size (Text Variants): After adding a text block, you can click on it to open its Text Properties. You can change the font style and size by selecting from a list of Text Variants. These pre-set styles range from large "Display" and "Title" options down to various "Headings" and "Body" text sizes. Using different text variants helps you create a clear visual hierarchy for the information on your card.

Editing the Journey Font Theme

For journey-wide consistency, you can set a specific font theme. This feature allows you to define the fonts used for all headers, body text, and labels throughout your entire journey.

How to set the Font Theme:

  1. Click on any Text Block to open the Text Properties panel.
  2. At the bottom of the panel, click the Edit Font Theme button.
  3. The Select Fonts menu will appear. Here you can choose a font for three different categories:
    • Header Text: Applies to large text elements like titles and headings.
    • Body Text: Applies to paragraphs, subheadings, and smaller content.
    • Label Text: Applies to the text on buttons, in forms, and other interface elements.

Selecting a consistent font theme is a great way to align the journey with your organization's brand and create a more cohesive user experience.

To add emphasis:

  1. Select the text you want to modify.
  2. Use the formatting options to make it bold, italic, or underlined.
  3. Adjust the alignment (left, center, right) as needed.

Adding a Button Block

Buttons are crucial for navigation and user interaction. To add a button:

  1. Select "Button" from the list of available blocks.
  2. Click on the button to customize its properties.

Customizing Button Properties

You can modify various aspects of your button:

  • Text: Enter the text you want to display on the button (e.g., "Explore").
  • Color: Choose a color that complements your design.
  • Size: Adjust the button size to fit your layout.
  • Style: Select from different button styles (e.g., filled, outlined).
  • Icons: Add a leading (left) or trailing (right) icon to enhance visual appeal.

Setting Button Actions

Buttons can be configured to:

  • Navigate to another card in the journey
  • Link to an external URL
  • Open an email client with a pre-filled address

To set a button action:

  1. Click on the button to open its properties.
  2. Choose the desired action from the available options.
  3. Enter the necessary information (e.g., card ID, URL, or email address).

Using the Email Action for Buttons

The Email action is a powerful tool that allows you to create a direct line of communication between your audience and your ministry team. When a user clicks a button with this action configured, it will automatically open their device's default email client (like Outlook, Apple Mail, or the Gmail app) and pre-populate the "To" field with an email address you specify.

Setup

Configuring an email button is straightforward:

  1. Add a Button block to any card in your journey.
  2. Click on the button to open the Button Properties panel on the right.
  3. Under the Action section, click the dropdown menu for "Navigate to:".
  4. Select Email from the list of options.
  5. A text field will appear. Paste the destination email address (e.g., prayer@yourministry.com or info@yourchurch.org) into this field.

Now, when a user clicks this button, it will launch a new draft in their email app, addressed to you.

Potential Use Cases

This feature creates a seamless way for users to engage directly. Consider using it for:

  • Prayer Requests: Create a button like "Pray With Someone" or "Share a Prayer Request" that sends an email directly to your prayer team.
  • Direct Contact: Offer a simple "Contact Us" or "Ask a Question" button that allows users to easily get in touch with ministry leaders or support staff.
  • Event or Group Sign-ups: Use a button like "I'm Interested in a Small Group" or "Volunteer for This Event" to let users express interest via email.
  • Feedback: Add a "Share Your Feedback" button to gather thoughts and suggestions from your audience about their journey experience.

Managing Blocks

Once you've added blocks to your card, you can manage them using the block menu:

  • Move: Use the up or down arrows to reposition blocks within the card.
  • Duplicate: Click the duplicate icon to create an identical copy of a block.
  • Delete: Remove a block by clicking the delete icon.

Undo Feature

If you make a mistake while editing, you can use the "undo" button located at the top of the journey builder to revert your last action.

Making a Response Field "Required"

You can prompt users to fill out a response field before moving to the next card. While the platform does not currently block submission of an empty field, you can set up the journey to ensure the user must actively click "Submit" to proceed, making it a stronger call to action.

1. Understanding the "Required" Toggle

In the

Response Field Properties, you'll find a "Required" toggle switch.

When you activate this, it adds a small red message below the field in the live journey that says, "This is required." It's important to know that this is only a visual hint for the user; it does not technically prevent them from clicking the "Submit" button on an empty field.


2. Forcing Submission to Continue

The key to guiding the user is to remove all other paths forward except for the "Submit" button linked to the response field.

  1. Add a Response Field: Add a Name, Email, Phone, or Freeform response field to your card. A "Submit" button will be automatically added to the card.
  2. Disconnect the Default Path: Every card has a primary exit point labeled "Default Next Step." If this is connected, users can skip the card by simply swiping or clicking to the side of the screen. To make your response mandatory, you must

    disconnect the "Default Next Step" connector from the next card. You can do this by clicking on the connection line and deleting it.

  3. Connect the Submit Button: Ensure the "Submit" button's connector is the only path leading to the next card.

With this setup, the only way for a user to advance in the journey is to interact with the response field and press the "Submit" button.

Important Limitation

Please be aware that even with this configuration, a user can still click the "Submit" button without typing anything into the text field. The current system is designed to strongly encourage, but not technically force, user input before proceeding.

Best Practices

  1. Consistency: Maintain a consistent style across your journey cards for a cohesive user experience.
  2. Clarity: Use clear and concise language in your text blocks and button labels.
  3. Visual Hierarchy: Utilize different text sizes and styles to create a clear hierarchy of information.
  4. Interactive Elements: Strategically place buttons and other interactive elements to guide users through your journey.

By mastering these card editing techniques, you can create engaging and effective journeys that resonate with your audience and achieve your ministry goals.For more detailed information and support, visit the NextSteps website or the NextSteps Support page. These resources offer comprehensive guidance on using the NextSteps platform to its full potential.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.