How to integrate RevenueHero with Gatsby forms?

1. Go to your landing page with your Gatsby form and find your form’s identifier which, for example here is #gform_16
2. Set up an Inbound Router in RevenueHero with the form identifier in your form mapping
3. Copy the installation script from the final step of the router set up.
   Sample installation script

   Copy

   <script type="text/javascript" src="https://app.revenuehero.io/scheduler.min.js"></script>
   <script type="text/javascript">
      // Use Router ID inplace of 666 here
      window.hero = new RevenueHero({ routerId: '666' });
      hero.schedule('#gform_16'); // Gatsby form ID
   </script>
   

4. In your Gatsby form component code, add the following code to integrate RevenueHero widet on your form submission
   Copy

   import { Script } from 'gatsby'
   
   <Script
   src="https://app.revenuehero.io/scheduler.min.js"
   strategy="afterInteractive"
   onLoad={() => {
      // Replace 666 with your Router ID
      const hero = new window.RevenueHero({ routerId: "666" })
      hero.schedule("#gform_16")
   }}
   />
   

That’s it. Once published, you’re ready to start converting your Demo Meetings 🎉🎉