Add Text

Text Step

This step is used to add text to users designs.

Adding Text Step

This step is used to allow customers to add their own personalized text to products. This step type enables you to set defined areas (regions) on your product that you would like them to be able to personalize with their own text. The Spiff 3D text step gives you full control on how you want your customers to be able to write in their own message. Add Text allows you set several configurations which gives you the ability to completely control the experience.

Configurations

  • Size
  • Color Selection - On/Off
  • Set Max Width (meaning text resizes to fit within that width)
  • Set Max/Min Characters
  • Set Case - Uppercase, Lowercase, Titlecase
  • Default Text
  • Replaceable Text
  • Vertical Text
  • Force a Single Font or Provide a List of Fonts
  • Alignment - Left, Right, Centered

Adding the text step to your workflow

As with all steps, you must be logged into the spiffHub and then be in a workflow, found by clicking on Content and then workflows.

Note: You can also log straight into a workflow through the product if it is already linked. To do this, go to the edit product page and in the first cards (Workflows) click on the three dots to the right of the workflow name in the list displayed.

In the workflow

  1. First, click on the ‘add step’ button at the bottom of the scene you would like to add your step to, and select the ‘Text Step’.
  2. Fill out the Step Title and Help Text and Step Group under General tab.
  3. Then under Options tab either select an option from the drop down see (Options) help for how to create an option, start adding variants to create a new option, change (Variant Name) or set a default option if you don't want to offer the user choice. See below images for Add option, Dropdown, Add Variant.

Shared options to select from Or Add Option Add Variant, (you can add multiple variants) change variant name

  1. Don't forget to save the workflow when you are finished.

Take a look at an example of a finished product.

Configuring the text step

General

See General settings for all steps

Default Text

The Default Text feature allows you to set the text that will appear when your customer first opens the workflow experience. This feature is commonly used to either guide the customer through recommended messages such as: “Happy Birthday”, or as a placeholder so that the model does not look blank when it is first viewed by the customer.

To set default text, simply type in the message you want the customers to see, ensure that the region areas (regions) is correct and save the workflow.

Replaceable Text

The replaceable text can be used so that customers can only edit a component of the default text. For example, as the merchant we can set the default text to say “From the Spiff Family” but the only text that we want the customer to edit is the “Spiff” component, so that the customer can write in their own family name without changing the surrounding text.

To do this, set the default text to the changeable element, which in this case is “Spiff”. Within the replaceable text field write “From the {{}} Family” as per the image below.

In action, the step we have just created will look like below image:

Edit All

You can allow further configuration of the replaceable text step by ticking the ‘edit all’ box. This means that customers can edit all the replaceable text if they want to change more than just the text within the ‘{{}}’ field. When customers select the ‘edit all’ box they will then be able to change the whole text.

The ‘edit all’ feature is best used in conjunction with replaceable text in the situation where you want to guide the customer through your customization experience promptly by allowing them to change a few words within a broader sentence. However, by selecting the ‘edit all’ feature, they can still have ultimate control of the text if they wish.

Max Length

The max length configuration allows you to set the maximum number of characters that customers can type within the Text step. The character limit includes special characters and spaces. Customers will see a certain number of characters remaining underneath the text field.

Below image shows what the client sees when they type in their message.

Below image is what you see when setting the maximum length within the text settings.

Variable Font Size

Within the text step configuration, as the merchant you have the option to control whether the font size resizes automatically depending on the number of characters the customer inputs or whether the font size stays the same regardless.

The font size is set in points, like any design programs such as Adobe Illustrator and Photoshop.

When variable font size is toggled you will be presented with maximum and minimum limits. The maximum means the customer has only inputted one letter, and this is the largest the font size will be. The minimum limit, conversely, is the smallest the font size will go. When the variable font size is not toggled you can set a font size, in points, that the text will remain as regardless of the number of characters that the customer has inputted. It is important to ensure that the region height and width size can accommodate the font sizes set in the workflow back-end. For example, if you have set the font size to remain as 12 points, the region height needs to be at least 13 to account for padding within the font file. If the region height or width is not respected, the customer will receive a warning message saying: “Text does not fit in one or more textboxes.” and will not be able to type any further characters.

Text Colour Configurations

Default Color

The default color feature allows you to set the color that the text step loads in. To set a default color click on the box within and type in the hex code that you want to set.

Enable Color Picker

If you want to give customers the choice of changing the color of their text, you can tick the ‘enable color picker’ box. This will load a range of colors which you can either remove by pressing the trash can symbol next to the color or add to by pressing the ‘add color’ symbol at the top left.

Delete Default on Focus

The Delete default on Focus feature when toggled will remove the default text when a customer clicks on the text step. When this feature is not toggled, the customer will be required to manually delete the default text to write their own text.

Allow Newlines

The allow newlines feature will enable your customers to type across multiple lines of text by pressing enter on their keyboard/mobile phone.

Enforce Uppercase

Enforcing uppercase will mean that your customers message will always be typed in caps lock.

Below image shows where you select Enforce Uppercase.

Vertical Text

Vertical Text will mean that the customer’s text will write vertically as opposed to the default horizontally. Below Image show the Vertical text on image.

Below Image shows where you select Vertical Text.

Text Alignment

The Spiff3D back-end allows you 9 positions within a region to justify and align text. The image below illustrates the 9 possible combinations.

Below images shows where you select the different options.

Multi Language Support

The Spiff3D platform supports all languages and characters.

If you are receiving the following message: “This character is not compatible with the current font” this is due to the current font not supporting the character or accent. To ensure this does not happen to your customers, you must upload into the Spiff3D platform any TTF or OTF which supports those characters and use those in the workflow builder.

Curved/Round Text

Curved & Round Text is supported in the Spiff3D platform but is currently not a feature available in the Spiff3D back-end.

To create a curved text option for your products please reach out to support@spiff.com.au