Embed -

This repository contains the assets for embedding a typeform in external websites

Requirement

You need to have installed node (> 4.x.x) in your enviroment.

Device support

• last 2 versions of major devices
• internet explorer >= 9
• safari >= 7

Browserlist support

Install

npm install

Start

Will launch a dev server in localhost:8080 with the different of modes of embeds.

npm run start

Build

• Clean dist/ folder
• Copy src/assets/, helpcenter/ and demo/ into dist/
• Webpack: Resolve imports and use loaders for SASS and JavaScript

npm run build

Testing

For now, we just have manual testing that lives as a checklist (here)[test/manual.md]. As well linting with standardjs.

npm test

Deploy

Upload directly to Amazon S3 Bucket. Depend on ENVIRONMENT=<stage|prod> it would upload to "share.typeform.com" or "stage-share.typeform.com"

There is a Jenkins job: [https://jenkins.typeform.tf/view/Embed]

Undocumented features

Uber embed

All features in the 'Uber embed' are activated using a query string in the url (directly in the iframe).

• Transparency: embed-opacity=NUMBER (NUMBER can go from 0 to 100)
• Hide headers: embed-hide-headers=true
• Hide footer: embed-hide-footer=true
• Hide scrollbars: embed-hide-scrollbars=true
• Autoclose after submit: embed-autoclose=NUMBER (NUMBER is an integer in seconds)

To use this features, users humans need to specify data-attributes to the wrapping div:

• data-hide-headers: Hide typeform headers

• data-hide-footer: Hide typeform footer

• data-hide-scrollbars: Hide vertical toolbars on the iframe

• data-transparency="NUMBER": Background transparency (0-100)

• data-button-text="Builder": Button text for mobile, defaults to "Start"

• data-submit-close-delay="NUMBER": Close popup after submit delay (in seconds)

• data-auto-open: Automatically show the popup when the page loads, no need to click anywhere

• data-mode="<popup|drawer_right|drawer_left>": Popup style. To prevent old users of embed to break, numeric data modes are still supported.

Exposed API

By default embed.js exposes an API that allows you to create new popups and new widgets.

• window.typeformEmbed.makePopup(url, options)

  • url: a renderer typeform url
  • options:
    • mode: [ 'popup' | 'drawer_left' | 'drawer_right' ]
    • autoOpen: [ true | false ]
    • autoClose: integer time to close in seconds,
    • hideScrollbars: [ true | false ]
    • hideFooter: [ true | false ]
    • hideHeaders: [ true | false ]

• window.typeformEmbed.makeWidget(element, url, options)

  • element: the DOM element that the widget will be appended to
  • url: a renderer typeform url
  • options:
    • hideScrollbars: [ true | false ]
    • hideFooter: [ true | false ]
    • hideHeaders: [ true | false ]
    • opacity: 0 - 100
    • buttonText: string