In This Article

App Event Steps: Options for Customizing a Site Tool

App_Event_Steps_quote_form.png

When customizing a site tool (like a quote form or weather widget), there may be a section called App Event Steps. This section lets you edit the appearance and the content of your site tool, from its text and button color to the information it requests and its overall user flow.

Learn more about this section and its many customization options below.

What Are Form Panels?

With the App Event section, each "Form Panel" represents a step of your site tool. For most quote forms, you will have two types of customizable panels (as shown in the screenshot just above):

  1. Form Panel: This is what initially appears on your website, often showing the form fields and a submission button along with some text and perhaps an image. Depending on what you want to present, you can have multiple form panels in a single form or widget.
  2. End Panel: This is what appears after the user has successfully submitted the form, usually as some kind of thank you message and/or next step.

If your site tool is the "Button Opens Popup" display type, however, it will have an additional form panel for the Start Button (shown below).

Button_opens_pop_up_start_button.png

If you are not familiar with "Button Opens Popup" or the other app display types, see some examples of display types here.

Form Panel Example

To understand form panels, check out the following example. This weather widget has four total panels, as shown in the screenshot below.

Example_of_weather_widget_app_event.png

By clicking the button for "Preview," you can see each of these four panels in turn, as shown in the GIF below.

four_panels_of_weather_widget.gif

Every panel in this sequence can be fully edited, including being reordered and even deleted.

How Do I Edit Form Panels?

To edit any form panel—whether the start button, the form panels, or the end panel "thank you"—simply click the blue pencil icon for that particular panel.

Edit_form_panel_by_clicking_pencil.png

Customizing the Start Button, Form Panels, and End Panel

The specific edits you can make will vary slightly depending on which form panel you're editing: the Start Button, a regular Form Panel, or the End Panel.

Let's look at each type of panel below.

Start Button Customizations

Start_button_app_event_steps.png

Remember: the Start Button panel will only appear for the Button Opens Popup display style.

When you click the blue pencil next to a Start Button panel, you will be brought to the page below. Here you can change the floating button's text by typing directly into the button on the left. 

Editing_your_start_button_for_quote_form.gif

Additionally, you can use the panel at the right-hand side to make further edits, including:

  • Button size
  • Rounded or square corners
  • Text style: bold or italics
  • Button background color
  • Button text color
  • Screen position

Form Panel Customizations

The next type of panel is the Form Panel. Unlike the Start Button, Form Panels appear on all display types. 

Form_panel_app_event_steps.png

Clicking the pencil will bring up the advanced customization options shown in the screenshot below. On the left is a preview of the current form panel; on the right are all the elements you can add and customize.

Customizing_form_panel_1.jpg

Note that there are two tabs on the right-hand side of the Form Panel editing page:

  • Elements
  • Style

Elements tab

Elements_tab_of_form_panel.jpg

The Elements tab includes the actual content of your Form Panel. For example, you can change what information you are requesting from the user, change the order of the elements, and so on.

Please note the following:

  • You can add multiples of certain elements, including text, text input, dropdown, radio group, and checkboxes.
  • Certain elements are disabled because they must be included for your quote form to work, including name, address, and email or phone number.
  • Adding your company logo will automatically insert the logo saved to your PSAI company settings.

Style tab

Style_tab_of_customizing_form.jpg

As you might guess, the Style tab allows you to change how your form looks, including:

  • Showing or hiding input labels
  • Adding a background color or image
  • Changing the headline text, color, size, and more
  • Customizing the button

All changes made to the Style tab are global, which means that they will affect every panel of your quote form. This is to ensure a cohesive look across the entire form.

End Panel Customizations

The final panel of any quote form or weather widget is the End Panel, which you can think of as a "thank you" message.

End_panel_app_event_steps.png

Because this is the final panel, you cannot request any further user input. Instead, you can make select changes (shown in the screenshot below), including:

Customizing_end_panel_of_quote_form.jpg

The End Panel is a great opportunity to provide a next step. For instance, you could link to a gallery page to get them excited about their project or to a "how it works" page so that they're prepared for their consultation.

Editing, Deleting, and Reordering Panels

You can remove form panels by clicking the gray X, and you can insert new panels by clicking the blue plus sign (+). You can also drag each panel to reorder them.

Rearrange_panels_to_customize_app.gif

If you do reorder your form panels, remember that the first panel must end up including name, address, and email or phone number.

Previewing Your Quote Form or Weather Widget

At any point in the process of customizing your quote form, you can click the Preview button to see how your design is looking.

Preview_button_on_quote_form.png

This will open your form in another tab of your browser, where you can click through your app as if you were submitting it. (Real data is not required.)

Please note that if you preview a quote form of the "Exit Intent" display type, you'll have to move your mouse away from the page to see the form—just like a real customer would.

exit_intent_preview.gif

 

 


For more information on quote forms and weather widgets in PSAI, please refer to these resources:

  • Editing the header or paragraph text
  • Linking to a webpage
  • Adding an image or weather report