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
After you've customized your PSAI app as discussed in the previous two articles, it's time to actually put your app to use and start generating leads for your business. In most cases (but not all), this means putting your app onto your website where visitors can see it, interact with it, and engage with it.
This article explains how to take the PSAI marketing source you've created and add it to your website.
1. Go to Your Sources Manager Page
Navigate to your Sources Manager page by clicking "Manage" from the left-hand toolbar.
2. Copy your App's Source Code
You can copy the necessary code directly from the Sources Manager page by clicking the "Copy" button on the app that you want to add.
Alternatively, you can also click "Edit" to enter the Settings panel for that individual marketing source. Then go to the Connection tab and click "Copy."
3. Paste the Code into the Appropriate Spot on Your Website
Now that your marketing source code is copied from PSAI, you'll need to insert it onto your website. The instructions for inserting your code onto your website vary slightly depending on the Display Type of your app. (Need a refresher on Display Types? Go back to Step 2 or see some Display Type examples here.)
Follow the guidelines below based on whether your app is floating or embedded.
Floating elements refer to the first two Display Types: Button Opens Popup and Auto Popup. (As an easy reminder, both say "Floating" underneath.)
Because floating elements "float" over your website (and do not affect anything underneath), they do not need to be placed in a very specific or precise place on the web page. The code simply has to be pasted somewhere within your website files, preferably as close to the end as possible.
We recommend pasting the code immediately before the closing body tag of your website, which looks like this:
The closing body tag is most often found in your website's footer files, although the exact means of locating and editing the footer file will vary depending on which website platform you use (such as WordPress, Squarespace, GoDaddy, etc.). Some platforms may also require you to place the code elsewhere than your footer file.
Find more specific instructions in our overview on adding floating elements to your website.
The third possible Display Type is Embed on Page, as shown below. In PSAI, embedded elements are most commonly used for Quote Forms or Weather widgets.
Unlike floating apps, embedded elements actually sit within a web page itself. Embedded elements do affect what's on the page around them, so where you paste an embedded form's code is more important than it is with a floating element.
As a general rule of thumb, paste the code on the correct web page(s) and in the correct spot where you'd like the form to appear. For example, maybe you want your form to be in the middle of your home page or at the bottom of your Contact Us page.
Depending on your website platform, you might paste the PSAI code directly into that spot, or you might paste the PSAI code itself elsewhere and instead place some kind of "shortcode" or placeholder into that spot. The exact method will vary depending on your specific website set-up and platform.
For detailed instructions on WordPress, Wix, and other common platforms, please see our overview on how to add an embedded form to your site.
Having trouble adding a PSAI app to your website? The quickest way to get help is to submit a support ticket. Be sure to mention the type of app you're trying to add as well as your website platform (Wix, WordPress, etc.). Use this link or open the Help widget in the bottom right corner of your screen.