Sign Up!

Expert Interviews Podcast

Learn How To Promote Your Posts!

blog post promotion 125x125

Sign up for Blog Post Promotion: The Ultimate Course (affiliate link) by Kristi Hines. Save 30% off current price with discount code: PODCAST

Browse by Tag

B2B Inbound Marketing Blog

Current Articles | RSS Feed RSS Feed

How to Embed SnapApp on a HubSpot Web Page


This is a tutorial for those who want to publish a SnapApp widget on a HubSpot web page. Plus, you'll learn a little about what SnapApp is and how you can use it for marketing.

What is SnapApp and how could you use it?

SnapAppSnapApp simply put is a marketing platform that allows businesses to attract, connect and engage their target audience - in some very exciting and innovative ways.

Do you have a marketing objective to drive more traffic, generate more Facebook fans, better engage site visitors and drive lead conversions? The platform allows you to create and publish branded, attention-getting polls, surveys, quizzes, sweepstakes and other such engagement tools to meet your business objectives. And, from what I've seen, SnapApp can be a fun, educational and entertaining experience for your audience. Check out the SnapApp Gallery and case studies to get inspired!

SnapApp is available in the HubSpot App Marketplace

HubSpot users can set up and integrate a SnapApp account from within their portal. Just login to your HubSpot and navigate to the Marketplace tab. Go to App Marketplace and search for SnapApp. You can install it for free and begin working with it right away. The SnapApp editor is WYSIWYG based and is laid out in a logical order: Compose - Customize - Connect - Publish.

SnapApp is currently offering HubSpot customers free publishing for 14 days and a 50% discount off their service for the first year. Pricing starts at $249 per month ($124.50 w/discount). You can run a one-month or longer campaign.

A SnapApp-HubSpot use case

Recently, I built what SnapApp terms a Personality Test with Score Range type of app for a HubSpot client's lead generation campaign. Basically, this is where you can conduct a survey to qualify respondents for one or more offers. Answers to each question is given a point value and at the end of the survey the prospect completes a lead gen form before seeing results. Upon completing the form, respondents are taken to the results page based on the pre-determined scoring ranges you've set up in the app.

HubSpot Professional and Enterprise customers are able to essentially replace the SnapApp lead gen form with a HubSpot form upon connecting the app with their HubSpot Lead API. The steps and means to do this are clearly laid out in the app editor under the Connect - Lead Collection section. Once your app is published, form field data is passed to your HubSpot leads database. Think of the possibilities for follow up, lead nurturing and passing the leads to your sales team via your CRM. SnapApp will also pass question and answer responses and scoring results via email to those within your organization you wish to receive them.

I'm just scratching the surface here on all the bells and whistles SnapApp and integration with HubSpot affords the marketer! So I encourage you to check it out and see what you can do with it to drive business objectives. Let's move on to the publishing phase.

Publishing a SnapApp campaign

SnapApp gives you a variety of ways and channels to publish your app.

Under the 'Publish' tab, you'll be able to select your publishing settings such as the end date of your campaign. Then, you'll choose the 'Publishing Methods' you want to use. These include publishing to a:

  • Facebook Fan Page
  • Microsite and Mobile QR Code
  • Plain HTML for Email
  • Widget Code for Web Pages

Depending upon your campaign objectives, you can choose to publish to one or all of these channels. Check out SnapApp's where it works page for more ideas.

When publishing to a web page, SnapApp generates some HTML code for you to copy and embed onto the page, and some Javascript to place in the footer. The following will walk you through how to do this in your HubSpot portal.

Steps to Embed SnapApp on a HubSpot Page

You have two options. First, you could embed it on an existing page of content by adding the HTML/Javscript module. Second you can create a new page and format it as a 'Blank (IFrame)" type page. I'm going to cover the second option.

1. Copy and paste the SnapApp widget Javascript to your portal's global footer

Regardless of the type of page you choose, you're going to want to grab the javascript code SnapApp gives you and add it to your global footer. Sound technical? Don't worry, it's easy to do in HubSpot, just follow these steps:

(1) In SnapApp, go to the Publish menu and scroll down to the bottom of the Widget Code box as shown below, copy all that string of code beginning with "<script type=...." then head over to your portal's Settings menu (currently listed under your user name, upper-right).

snapapp javascript

(2) In your HubSpot portal's Settings menu, scroll down and click the Website Settings link. Next, scroll down the page to the Body Footer HTML box and paste the Javascript code in this box (either at the beginning or end of any other snippets of code you may find there - being careful not to alter or paste in the middle of existing code).

Be sure to click the 'Save Changes' button at the bottom of the page.

The good news is, you only need to do this once! And, you can then embed the SnapApp widget code for this or future campaigns to any page you wish without having to repeat this step.

body footer html javascript

 2. Add a new page and the SnapApp Widget Code

Now, head over to your main portal menu and choose 'Content' then 'Page Manager' and click the 'Add New Page' button. You'll want to configure the following:

(1) Give your new page a name. Here you can also control the Title (tag) of your page and the page URL (if you want something different).

(2) De-select 'Viewable by Public' until you're ready to publish the page and make it visible to all users. (Remember to come back to Page Properties and select this so others will see it when you do go live!)

(3) De-Select 'Show in Menu' if you want this to serve as a landing page you'll be directing/driving visitors to. The page name won't be visible in your navigation menu.

(4) Click 'Show Advanced Options' and scroll down to the 'Layout' selector. Click the drop-down arrow and select the 'Blank (IFrame)' option.

(5) Scroll down to the bottom of the page and choose 'Save Changes.'

page properties

(6) Click to 'View the Page' and you should see something like this:

blank page(7) Leave the Follow Me module there for now, you can remove it later. Click the 'Add Module' button and choose the 'HTML/Javascript' module from the Content box selections.

(8) In the 'Configure Module' box check both boxes as shown below:

configure module widget code

(9) Copy the HTML code found in your SnapApp Widget Code box and paste it into the Text/HTML box of your page. The code you want is at the top of the box, just before the Javascript code you copied earlier. See below for an example:

page widget code

Note: Copy and paste the code beginning with the first <div> tag through the closing </noscript> tag.

(10) After you've pasted your Widget Code in the Text/HTML box click the 'Save' button and view the page. You may want to do a 'Quick Preview' to see how it looks on a page without the admin/page editor controls showing.

3. Add Some HTML to style the finished page

You'll notice the widget will be displayed on your page left-aligned and the background will be white around it. You may want to center it on the page and add some page background color.

That can easily be done with the 'align' and 'background-color' div tags.

4. Review, test, update & launch

If your happy with how it looks you can now test it out before returning to Page Properties and checking the 'Viewable by Public?' box to make your campaign visible to all users.

Note also, that if you need to make changes to the content in the app/widget, you can edit it via SnapApp, then click the button, 'Update Live App' under the Publishing Methods tab.

I hope you've found this tutorial helpful for using SnapApp on a HubSpot landing/web page. Let me know of any questions in the comments.