This article explains how to customize a Weather Widget from the PSAI admin portal. By following the instructions below, you'll be able to change your Weather app's placement, color, imagery, styling, form fields, headers, and more.
To access the Customize tab as described below, you must first create and save the site tool. Not sure to how to do that? Follow step-by-step instructions on creating a new site tool here.
1. Go to Site Tools
Open the Site Conversion Tools page by clicking "Site Tools" from the left-hand toolbar.
2. Edit the Widget
You can identify weather apps at a glance by looking for the purple square with the white storm cloud.
Click the "Edit" button to start making changes.
3. Click Customize
After you click on your desired Weather app, the Settings panel will pop up by default. Click the "Customize" tab at the middle top.
The Customize tab will show you all of the available customizations for that specific type of app, including:
- Display Type
- App Event Steps
Customize Section #1: Display Type
Within the Customize tab, first choose the Display Type you prefer: Button Opens Popup, Auto Popup, or Embed on Page.
Check out some guidance and examples of Display Types here.
Customize Section #2: App Event Steps
The customization options that appear under App Event Steps will vary slightly depending on which of the three Display Types you have chosen.
The key difference is this: If Button Opens Popup is selected as your Display Type, then your App Event Steps will include a Start Button as the very first panel, as shown below. You will be able to customize the button's text and appearance, as well as the placement of your chat widget (bottom left or bottom right).
If you have chosen either of the other two Display Types (Auto Popup or Embed on Page), then you will not see a Start Button panel. The rest of the customization options and process will be the same for all three Display Types.
4. Edit Form Panels
No matter which of the three Display Types you have selected, every panel of your Weather app can be completely customized by you. You can change button colors, heading text, paragraph text, form fields and sequence, and more.
Simply click the blue pencil icon to pull up the advanced customization options.
The advanced customization options will look slightly different depending on the type of panel you are editing. The three possible options include Start Button, Form Panel, or End Panel.
We will look at each type in detail below.
Start Button Customizations
Remember, the Start Button Panel only appears if your Display Type is set to Button Opens Popup (Floating).
For the Start Button, you can change the:
- Intro greeting text
- Background color of the button
- Color of the storm icon
- Screen position of the popup Weather widget (bottom left or bottom right)
In terms of screen position, the standard best practice is bottom right. We recommend placing your weather app there unless you have a specific reason not to (for example, you don't want to cover up some important piece of text behind it).
Form Panel Customizations
Every Display Type will include three Form Panels by default. Click the blue pencil icon to enter the advanced customization screen.
From the advanced customization screen (shown below), you'll see the content of your form on the left and your customization options and tools on the right.
Note that there are two tabs on the right-hand side: Elements and Style.
The Elements tab includes the actual content of your form panel. For example, you can change the information you're requesting from the user, you can insert a picture, you can add a comment box, you can add an appointment scheduler box, and more.
Within your first Form Panel, you must include the following user input fields: Name, address, and email or phone number. This ensures accurate data collection for all leads.
Like the name suggests, the Style tab is where you'll be able to change the look and feel of your form.
In the Style tab, there are subsections for each aspect: Form Style, Heading, Text, and Buttons. Here you can change colors, font sizes, spacing, shadows, rounded or square corners, and so on. As much as possible, use the Style tab to make your Weather app match the rest of your website aesthetic.
All changes made to the Style tab are global, which means that they will affect every panel of your Weather app.
End Panel Customizations
Every Weather app includes an End Panel, which is simply the final message that appears when someone has completed your form. Because this is the final panel, your customization options are more limited; for example, you cannot request any additional input from the user. You can think of the End Panel as a "thank you" note.
As shown below, you can edit the headline and paragraph text of an End Panel.
Your End Panel can also link to an external webpage, which is great for sending users to a targeted location. For example, maybe you send them to an "Our Process" page to learn what to expect next, or perhaps you send them to a gallery of your work to get them excited.
5. Edit, Delete, or Reorder the Panels
At any time in the customization process, you can remove 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.
If you reorder panels after creating them, remember that the first panel must include fields for name, address, and email or phone number.
6. Preview Your Weather Widget
There's a lot you can do to customize your Weather app, so we recommend taking advantage of the "Preview" feature often. By checking your edits as you make them, you can get great insight into how your Weather app will look and function for the end user.
Click the "Preview" button to view your Weather app in a new tab of your browser.
Trial and error is the best way to become familiar with all the ways you can tweak and tailor your PSAI apps. Feel free to play around with customizing your Start Button, Form Panels, and End Panel, previewing your changes as you go.
7. Save Your Changes
When you are satisfied with the design, content, and sequence of your Weather app, click the "Save Changes" button in the upper right-hand corner. (This button is not always present but instead automatically appears whenever the system detects that changes have been made.)
If you ever want to edit your weather app in the future, simply return to the Sources Manager page and follow the same steps as detailed above.
You can even edit your weather app even after it has been added to your website. If your app is live on your site, all changes that you make (and save) from your PSAI admin portal will immediately show up on your website.
Next Steps for Your Weather Widget
If you're customizing a new Weather app, then the next step will most likely be to add it to your website. For tips, see our instructions for adding PSAI apps to your website here.
Did you know? The Weather widget is just one way to provide extreme weather reports to homeowners. If you'd like to provide a weather report to a lead who has not interacted with the Weather Widget, you can do so through the Com Portal.