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?
SnapApp 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.
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) 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).
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.
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.'
(6) Click to 'View the Page' and you should see something like this:
(8) In the 'Configure Module' box check both boxes as shown below:
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.