Typeform

http://www.muse-themes.com/products/typeform

Our Typeform widget integrates with the web's leading data collection tool for professionals. Site integration is easy, with options for embedded forms, as well as lightbox-based pop-ups.

Data Collection has never looked so good! Typeform's highly versatile response forms are beautiful and easy to navigate, with friendly, conversational questions and answers. Perfect for surveys, sign-ups, applications, polls and more!

  • Compatibility: Muse 2018.1
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial Release



Setup

This integration widget allows you to easily display Typeform tools on your website. The majority of the setup and styling takes place at AddThis.com. Toward the end of these instructions, we’ll work in Muse to complete the integration. Let’s get started!

SETUP AT TYPEFORM.COM

  • Go to https://typeform.com
  • Log in or create a new account.

  • You will be shown a large variety of templates to get started. Start with a template, or from scratch if you prefer.

  • Any template or typeform you begin will be added to your workspace. Your workspace will contain all of your typeforms, whether they've been published or not.

  • As soon as you've clicked on a template or new empty typeform, you will be taken to the typeform editor. Explore the typeform editor and all of the available options.
  • You can finish the typeform now or at a later time. For now, let's get the Typeform ID needed for our widget. Copy the string of random characters in the URL:

WIDGET PLACEMENT IN MUSE

  • Open the Typeform widget folder. Select one of the widgets: Embed or Popup:
    • Embed: This widget places the typeform onto your page inline.
    • Popup: This widget enables a popup for your site.

EMBED WIDGET SETUP

  • The embed widget should be placed exactly where you would like the typeform to appear on your page. You may resize the widget as needed to fit the page layout. You may also stretch the widget to full browser width if needed.
  • Open the widget option panel.
  • Enter the Typeform ID. The process is explained above.
  • Typeform Height: This value applies a height to the embedded typeform. If the actual typeform height is greater than the value entered, a scrollbar will be applied.
  • 100% Height: This setting enables 100% height on the typeform. This means that the typeform will take up all of the browser space, vertically, regardless of the user's browser shape or size. The 100% height sizing applies to the typeform no matter where it is placed on the page layout. For example, if the 100% height typeform is placed in the middle of a very long page, when the user scrolls down the page to the typeform, the typeform will take up 100% of the browser height, even when there is content below.
  • Deduct Header Height: This setting deducts a specified amount from the height of the typeform when the 100% height toggle is enabled. The purpose of this setting is most useful if the typeform is all that you will have on a page. If the typeform is placed lower on a page with other content, there is little purpose for this setting.
  • Typeform Background Opacity: Design settings at typeform.com will apply a background color to the typeform. A value of "1" will apply the typeform's original background color. A setting of "0" will mean that the typeform's original background color will not be seen, and the Muse background fill color will be seen. Settings between 0 and 1 will apply varying amounts of opacity to the original typeform background color.
  • Start Button Text (Mobile Only): This setting applies mobile-specific button text.
  • Hide Header/Footer: These toggles hide the Typeform header or footer. Hiding these is helpful if you wish to minimize Typeform's branding. Note that not all typeforms have headers.

POPUP WIDGET SETUP

  • The popup widget can be placed anywhere on the page. We suggest placing the widget out of the way, off canvas.
  • Typeform ID: Enter the Typeform ID found in the steps in the first section, above.
  • Button Graphic Style: This graphic style links your custom open button with the widget. Create a button and style as you like, using a State Button. Apply a graphic style to the button, and enter the style name here in the widget.
  • Open Mode: There are several open modes, such as Popup (lightbox), Drawer Left and Drawer Right. The Drawer Left/Right are slide-in styles.
  • Hide Header/Footer: These toggles hide the Typeform header or footer. Hiding these is helpful if you wish to minimize Typeform's branding. Note that not all typeforms have headers.
  • Auto Open: This opens the Typeform popup automatically when the page loads.



Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known conflicts


Additional Info Links