Installation

We'll start showing how to embed the simplest version of one YepCode form, and then we'll go deeper with full form configuration.

Embed the form

There are two methods to embed a form in any external webpage:

• Using one JavaScript SDK that will replace DOM elements with forms
• Using the YepCodeForm ReactJS component

In both of them, you'll need your two mandatory parameters:

• yepcode-team-id: your team id, that it's available on your workspace url https://cloud.yepcode.io/<yepcode-team-id>
• yepcode-process-id: your process id, that it's available on your process url https://cloud.yepcode.io/<yepcode-team-id>/processes/<yepcode-process-id>. A sample could be fd7f9a83-2d3d-1af8-6c3f-b9caa68531b1

Method 1: Embed a form using our JavaScript SDK

The first step is to place this snippet into the head tag of your website.

<script defer="defer" src="https://yepcode.io/sdk/forms.js"></script>

It may be loaded globally in your website, or just in the webpages where you want to embed forms.

Init forms using data attributes

By default, the SDK will look for any DOM element containing the data attributes data-yepcode-form-team and data-yepcode-form-process and it will replace each element with the full form renderization.

This would be the simplest version of one form:

<div
  data-yepcode-form-team="<yepcode-team-id>"
  data-yepcode-form-process="<yepcode-process-id>"
></div>

Init forms using YepCode.initForm function

A second approach to embed a form with our SDK is calling one function that the SDK exposes and that will receive the DOM element selector and a JSON with the config:

<div id="my-yepcode-form"></div>
<script>
  YepCode.initForm("#my-yepcode-form", {
    team: "<yepcode-team-id>",
    process: "<yepcode-process-id>",
  });
</script>

If you prefer to provide the DOM element itself, that also supported:

<div id="my-yepcode-form"></div>
<script>
  YepCode.initForm(document.getElementById("my-yepcode-form"), {
    team: "<yepcode-team-id>",
    process: "<yepcode-process-id>",
  });
</script>

Method 2: Embed a form using YepCodeForm ReactJS component

info

ReactJS v17 and v18 versions are supported

• Install as NPM package using your favourite package manager:

yarn add @yepcode/react-forms

or

npm install --save @yepcode/react-forms

• Import the component and render it in your ReactJS app:

import YepCodeForm from "@yepcode/react-forms";

const MyComponent = () => {
  return (
    <YepCodeForm
      team={"<yepcode-team-id>"}
      processId={"<yepcode-process-id>"}
    />
  );
};

note

If you are using some Server Side Rendering framework like NextJS, you have to use dynamic components with no SSR:

import dynamic from "next/dynamic";

const YepCodeForm = dynamic(() => import("@yepcode/react-forms"), {
  ssr: false,
});

const MyComponent = () => {
  return (
    <YepCodeForm
      team={"<yepcode-team-id>"}
      processId={"<yepcode-process-id>"}
    />
  );
};