Hello,

Thank you for providing this library! I would like to use this in a project but there is currently no explicit license granted to this work. Would you please consider releasing this under a license such as MIT?

Please see the following references for more details:

• Licensing a repository
• Why do people care so much about the legal side of open source?

Thank you very much for the consideration.

When using Gatsby (v 1.1.45), I can gatsby develop just fine and see embedded Typeforms.

However, when using gatsby build I get a webpack error: window is not defined

Hello,

I just saw that onSubmit callback is missing
It would be great to support it
https://developer.typeform.com/embed/onsubmit-callback/

🍺

Hello,

I'm fairly new to react and looking into embedding a form as a pop-up. I'm using functional components and can't really figure out how to adapt the classic example for functional stateless components (espacially the ref part). Any chance you can provide us with a working example ?

Cheers

When a form gets submitted, some answered questions are required to be answered again.

This is not a consistent problem, but it happens regularly.

Let me know if you need more information.

Howdy!

On page load we're taken all the way to the bottom of the page and the user has to scroll all the way up. (So I position my ReactTypeformEmbed at the very bottom of the page, and then the user is scrolled to that component not after the component is loaded (tried fixing with a setScroll on the componentWillMount function), but after the (embedded) typeform pagee loads.

Here's a snippit for context:

        <div className={classNames(classes.main, classes.mainRaised)}>
          <div className={classes.container}>
            <ScrollableAnchor id={"about-us"}>
              <SectionAboutUs />
            </ScrollableAnchor>
            <SectionTeam style={{ marginTop: "-150px" }} />
            <ScrollableAnchor id={"faq"}>
              <SectionFAQ />
            </ScrollableAnchor>
            <ScrollableAnchor id={"schedule"}>
              <SectionSchedule />
            </ScrollableAnchor>
            <SectionSponsors />
            <ScrollableAnchor>
              <SectionWork /> {/* <ReactTypeformEmbed  LIVES HERE!!! /> */}
            </ScrollableAnchor>
          </div>
        </div>

Full source for that page found here: https://github.com/MarioLopezBaylor/wacode-site/blob/master/src/views/LandingPage/LandingPage.jsx

And here's the render function from the component:

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.section}>
        <GridContainer
          justify="center"
          style={{ height: "475px", width: "100%" }}
        >
          <GridItem cs={12} sm={8} md={8}>
            <h2 className={classes.title}>Work with us</h2>
            <h4 className={classes.description}>
              Wacode is looking for sponsors and community partners. We want to
              find business and organizations who believe and support our
              mission of bringing technology to our local community, and
              providing a platform for our flourishing tech community.
            </h4>
            <ReactTypeformEmbed
              popup={false}
              url="https://wacodeteam.typeform.com/to/mpK8Ns"
            />
          </GridItem>
        </GridContainer>
      </div>
    );
  }

Full source for this other component found here: https://github.com/MarioLopezBaylor/wacode-site/blob/master/src/views/LandingPage/Sections/SectionWork.jsx

If you need more context, here's the full repo: https://github.com/MarioLopezBaylor/wacode-site

Maybe I'm being dumb about this? Let me know.

Thanks for looking into it!

The Embed Modes offered in the app are Standard, Full-page, Popup, Slider, Popover, and Side Tab. This library appears to only support Popup (popup=true) and, I assume, Full-page (if popup=false). It appears the only way to use the others is to use the copy-and-paste code snippet in the admin.

When I import it the way it is shown in the README file. It gives the below error:

Could not find a declaration file for module 'react-typeform-embed'. 'path_in_node_mdulesreact-typeform-embed/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-typeform-embed` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-typeform-embed';`

It gives a 404 when I try to install with types.

Does this package works in React Native?

Hey after installing this npm told me that it had many vulnerabilities, I'm going to try to fix them but just so you people know.

Workaround:
render component only after mounting

The Typeform displays completely fine and pops up well, but when you go to type in the answer, it brings the keyboard up and then immediately shoves it back down. It does this every time you try to type so users are not able to finish the form.

Any others have this issue or any suggestions? I'll keep trying it on different Android devices.

There are no error handlers like onError or something like this and when an error occurs, like this one:

from my understanding, there is nothing one can do about it.

Hi - Tried to install this in a Gatsby project and coming up w/ some errors around Babel. Trying to figure it out, any suggestions?

Thanks

https://gist.github.com/noomerikal/2f7f9d13c5449849d0eb7f447175ee65

on while filling up the Form.

Once I navigate back or to any page powered by react router I can't scroll or touch anymore on my website, it's like I'm locked.

It's exactly on the form if I was the user and decided to cancel the form and go away from that page.

Does anyone has experienced this?

Hi! Thanks for contributing the code. Embedded Mode is awesome on PC but it does not work on a mobile device such as iPad.

Do you happen to know how to deal with it?

I've just tried this component on a simple page with a div and the Typeform as the single child. I cannot make it work without this annoying refresh: http://sendvid.com/chc8cy5p

I have tried removing the classes from the div. Is this related to some internal <input> tag?

<div className={'container-fluid-content pay'}>
    <ReactTypeformEmbed url={'LINK'}/>
</div>

Any idea how to respond to this bug?

Error in ./~/react-typeform-embed/lib/ReactTypeformEmbed/ReactTypeformEmbed.css Module build failed: Error: No PostCSS Config found in: /Users/xxxxxxx/auth0react/node_modules/react-typeform-embed/lib/ReactTypeformEmbed at <anonymous> @ ./~/react-typeform-embed/lib/ReactTypeformEmbed/ReactTypeformEmbed.css 4:14-153 18:2-22:4 19:20-159

App crash when using widget with React Next.

This is due to the fact that the application collects the wrong link.

In your example popup you show:
ref={(tf => this.typeformEmbed = tf) }/>

My ESLint gives an error:
[eslint] Arrow function should not return assignment. (no-return-assign)

I added some content on the example you provided. Turns out the root DOM would block it above.
I think the root DOM could be hidden in popup mode.

I have the PRO + account and I'm trying to print the result of the onSubmit callback but its undefined.

This is my code right now:

class TypeForm extends React.Component {
  onSubmit(args) {
    console.log('onSubmit', args);
  }
  render() {
    return (
      <div className="type-form''>
        <ReactTypeformEmbed
          onSubmit={this.onSubmit}
          popup={false}
          url={this.props.url}/>
      </div>
    );
  }
};

Thanks in advance.

I have embedded a typeform inside a webpage. It works great, but one thing I've noticed is that it caches the form submission results, so that the next time the person submits the form, the values are pre-populated. I don't want the values to be pre-populated.

Is there a built in way to remove the cache, or do I have to remove it from local storage manually?

Hi there,

Trying to add this to my gatsby project but running into an issue where the form loads a full page: https://5d1399e7729b99000785c917--jpvalery-portfolio.netlify.com/contact/

I tried adding a style="position:relative" but it didn't work

For reference, here's the contact.js page:

import React from 'react'
import { graphql } from 'gatsby'
import Helmet from 'react-helmet'
import config from '../utils/siteConfig'
import Layout from '../components/Layout'
import WrapperGrid from '../components/WrapperGrid'
import Hero from '../components/Hero'
import ContactBody from '../components/Contact/ContactBody'
import ContactBodyTop from '../components/Contact/ContactBodyTop'
import ContactBodyBottom from '../components/Contact/ContactBodyBottom'
import { ReactTypeformEmbed } from 'react-typeform-embed';
import SEO from '../components/SEO'

const Contact = ({ data, location }) => {
  const info = data.contentfulAbout
  return (
    <Layout location={location}>
      <Helmet>
        <title>{`${config.siteTitle} - Contact`}</title>
      </Helmet>
      <SEO postNode={info} pagePath="contact" customTitle pageSEO />
      <WrapperGrid>
        <Hero image={info.heroImage} />
        <ContactBody>
          <ContactBodyTop body={info.body} />
          <ContactBodyBottom>
            <ReactTypeformEmbed url="https://jpvalery.typeform.com/to/y96C4A" hideHeaders="true" hideFooter="true" opacity="0" style="position:relative;" />
          </ContactBodyBottom>
        </ContactBody>
      </WrapperGrid>
    </Layout>
  )
}

export const query = graphql`
  query {
    contentfulAbout {
      title
      id
      heroImage {
        title
        fluid(maxWidth: 1000) {
          ...GatsbyContentfulFluid_withWebp
        }
        ogimg: resize(width: 900) {
          src
          width
          height
        }
      }
      body {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`

export default Contact

Any idea what I'm doing wrong?
How could I fix this so that the form stays in <ContactBodyBottom>?

Thanks a lot for your help!

I am embedding 2 typeform in a single component. onSubmit function on both the component get called simultaneously even if I have submitted only first typeform.

import React from "react";
import { ReactTypeformEmbed } from "../components";

const ExampleWidget = () => {
  return (
    <div>
      <div>
        <ReactTypeformEmbed
          onSubmit={() => {
            console.log("typeform 1 submitted");
          }}
          url={"https://typeformdeviomedia.typeform.com/to/Cvc6N8"}
        />
      </div>
      <div>
        <ReactTypeformEmbed
          onSubmit={() => {
            console.log("typeform 2 submitted");
          }}
          url={"https://admin.typeform.com/to/cVa5IG"}
        />
      </div>
    </div>
  );
};

export default ExampleWidget;

I'm not 100% on what the issue here is, or why, but just tried this library out and when I set popup={true}, any buttons in the same render block no longer seem able to run their onClick

"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-typeform-embed": "^0.1.5",

render() {
    return (
      <div className="ExamplePopup">
        <ReactTypeformEmbed
          popup={true}
          url={'https://demo.typeform.com/to/njdbt5'} />

        <button onClick={()=> alert(1)}>Foo</button>
      </div>
    )
  }

When I comment out the popup={true} I can click the button and get an alert, when I add it back in, nothing fires. Debugging with the react dev tools, I can see that the onClick event is still bound to it, and when I "store as global" and call it from the console, it fires correctly. So.. not sure what's going on here.

Edit: Trying to replicate this in a clone of this repo, changing/adding libraries/etc, and so far can't break it.. Non-deterministic issues!

Edit2: Ok, seem to be able to replicate this as follows:

create-react-app break
cd break
npm i react-typeform-embed

Create a new file ExamplePopup.js with code copied from this repo:

import React from 'react';
import { ReactTypeformEmbed } from 'react-typeform-embed';

class ExamplePopup extends React.Component {
  constructor(props) {
    super(props);
    this.openForm = this.openForm.bind(this);
  }

  openForm() {
    this.typeformEmbed.typeform.open();
  }

  render() {
    return (
      <div className="ExamplePopup">
        <ReactTypeformEmbed
          popup={true}
          autoOpen={false}
          url={'https://demo.typeform.com/to/njdbt5'}
          hideHeaders={true}
          hideFooter={true}
          buttonText="Go!"
          style={{top: 100}}
          ref={(tf => this.typeformEmbed = tf) }/>

        <button className="btn" onClick={this.openForm} style={{cursor: 'pointer'}}>Click to open the popup!</button>
      </div>
    );
  }
}

export default ExamplePopup;

Edit App.js to include the following additional lines:

import ExamplePopup from './ExamplePopup';

And in the render()

<ExamplePopup/>

Then npm start.

The button shows, but when you attempt to click on it, nothing happens.

Should I just add them to the url prop of the component?