This article is part of a series on creating and using marketing sources:
- Introduction: What Is a Marketing Source in PSAI?
- Step 1: Create a New Marketing Source/App
- Step 2: Customize the Display Type of Your App
- Step 3: Customize the Design of Your App
- Step 4: Add the Marketing Source to Your Website
- Step 5: Interact with Leads in the Com Portal
In the previous article, we explained how to customize the Display Type of your app: Button Opens Popup (Floating), Auto Popup (Floating), or Embed on Page. In this article, we'll dive deeper into the more advanced customizations that you can make.
These advanced customization options are also located in the "Customize" tab of each individual marketing source, under the second section titled "App Event Steps."
You'll use the App Event Steps section to customize how each individual app looks, what it says, and how website users can interact with it.
Beginner Tips for Customizing PSAI Apps
Before we dive into the specific ways you can customize each PSAI app, let's review some basic tips for understanding how app customization works.
Different apps have different customization options
Just like Display Type as discussed in the previous article, the App Event Steps panel will offer slightly different options based on the type of app you are customizing. A quote form, for example, has different customizations available than a Chat widget or an SMS number (which doesn't have any).
Again, don't worry—the tool will only show you the customizations available for that particular app type.
As a reminder, the 5 PSAI marketing sources or "apps" include quote forms, weather, chat, SMS, and Facebook business chat. They are located under the "Manage" tab of your PSAI admin portal. If you need more overview, go back to the Introduction to this series.
If you want to skip straight to the customization instructions for each type of PSAI app, jump down to that section now.
A single app can have multiple panels
Under App Event Steps, you'll see that some types of apps can have more than one panel. (You can think of a "panel" as a single step in the process of that app.)
For instance, the Quote Form shown below has four separate panels. This means that the user would progress through four different steps in the process of completing the form.
All panels can be customized
No matter which app you are working with, each and every panel can be customized completely. Just click the blue pencil icon to see all of the customizations available for that specific panel in that specific type of app.
For example, clicking the blue pencil icon in this specific form panel brings up the advanced customization screen shown below. Here you can edit existing elements, like headers and buttons, or you can add new elements, like a comment box or an appointment scheduling box.
Click the gray X to delete a panel
To completely remove a panel, click the gray X.
Drag panels around and insert new ones
As you customize your app, you may decide that you don't like the order. Simply drag panels to rearrange them and click the blue plus sign (+) to insert a new panel between existing panels.
Preview your changes frequently
To check your progress as you go, don't forget to click the "Preview" button in the upper right corner. This will open a new tab in your browser where you can see exactly how your app will appear to users. We recommend taking advantage of the preview feature many times as you edit.
The GIF below illustrates just how useful the Preview feature can be. It shows the Preview version of the exact same quote form that we've been editing in the screenshots above.
The screenshots above show the customization screens from the back-end, while the Preview shows the form's design from the front-end—just as it would appear to your website visitors.
Don't forget to save your changes
As soon as you've made changes to your app, the system will prompt you to either undo your changes or save them. Click "Save Changes" if you're happy with your edits.
Feeling overwhelmed? We recommend playing around with some test apps in your PSAI admin portal. Create one new marketing source for all 5 types, and then experiment with all of the design changes you can make. As long as your marketing source is not live (i.e. you have not yet added your app's code to your website), nobody will see your experiments except you and your company's PSAI users.
Step-by-Step Guides: How to Customize the Different PSAI Apps
For more detailed explanations of how to customize the different marketing sources in PSAI, check out the articles below:
The other two PSAI marketing sources, SMS and Facebook Business Chat, do not have a Customize tab at all. SMS is just a phone number and Facebook Business Chat is restricted to what Facebook natively offers, so these apps cannot be customized further.