In This Article

Site Tool Display Types: Floating vs. Embedded

Wondering what the "Display Type" field means? Whenever you add an embedded element to your sitecreate a quote form, a chat bot, or a weather widget, you'll be able to choose one of three possible Display Types:

  1. Button Opens Popup (Floating)
  2. Auto Popup (Floating)
  3. Embed on Page

No matter which type of app you are customizing, the field for Display Type is located in the same place: at the top of the Customize tab for that individual site tool.

Customize_tab_with_three_display_types_shown.png

It's important to understand these Display Types so that you can choose the right one for your specific use case. Below are some explanations and examples of the three display types.

1. Button Opens Popup (Floating)

Button Opens Popup (Floating) refers to a widget that opens when you push the button and that "floats" on top of your website.

As shown in the GIF below, the floating display type is often used for chat.

Button_Opens_Pop_up_Example.gif

However, you can also create a floating button call-to-action of any kind, not just for chat! For instance, in addition to the Gia chatbot, the company below is using a floating quote form to advertise a special giveaway.

Floating_button_quote_form_gif.gif

Button Opens Popup is the only Display Type whose position you can edit directly from the PSAI admin portal, as you can set the widget to appear in the bottom right or bottom left corner of the screen. 

2. Auto Popup (Floating)

Auto Popup (Floating) appears as an automated popup window whenever the user moves the mouse away from the screen, as if to leave your site. (This style of popup is also called "exit intent.")

Like the first Display Type, it also "floats" above your website.

Auto_Popup_Floating_Example.gif

Auto Popup elements are often used for things like announcements/alerts, special offers, quote forms, or extreme weather reports.

3. Embed on Page

Unlike the previous two, the Embed on Page display type does not "float" on your page; it is actually embedded into the page itself.

If you have a blank page with just a background photo, an embedded form would look something like the screenshot below.

Embedded_Form_example.png

If you are embedding a form onto a page with already-existing design elements—like headlines, paragraph text, or non-background images—then the form will impact the placement of those elements. Unlike floating apps, you may need to tweak the design of your current web pages to make an embedded form look right.

Embedded forms are often used by website visitors to request free consultations, pricing, virtual estimates, Weather reports, and more.

How to Add Floating or Embedded Elements to Your Website

Both floating and embedded elements are added to your website in the same general way. Once you have created the site tool, you'll copy the code from PSAI and place it into your website files. 

Get more detailed instructions (for WordPress, Wix, and Squarespace) below:

More Resources on Creating Site Tools

For a beginner friendly overview of Display Types and a lot more, check out our complete guide on PSAI site conversion tools. You can also learn how to create each type of site tool in these resources: