Getting Started

TBit External Apps allows you to embed powerful, dynamic applications directly into your website. Get started in minutes with our simple embed script.

Quick Start

Step 1: Include the Script

Add the TBit Forms embed script to your HTML page:

<script src="https://exapps.tbit.io/embed/forms.js"></script>

Step 2: Add the Container

Place a container element where you want the form to appear:

<div id="tbit-form" data-form-id="YOUR_FORM_ID"></div>

Step 3: Get Your Form ID

Create a form in your TBit dashboard and copy the Form ID. Replace YOUR_FORM_ID with your actual form ID.

Configuration Options

AttributeDescriptionDefaultExample
data-form-idYour form ID (required)-507f1f77bcf86cd799439011
data-widthForm width100%600px
data-heightForm heightauto800px
data-themeColor themetbitLighttbitDark

Advanced Usage

Custom Event Listeners

Listen for form submission events:

document.getElementById("tbit-form").addEventListener("tbitFormSubmitted", (e) => {
  console.log("Form submitted:", e.detail);
  // e.detail.formId - The form ID
  // e.detail.submissionId - The submission ID
});

JavaScript API

Use the TBitForms API for programmatic control:

// Initialize forms manually
TBitForms.init();
// Reload a specific form
TBitForms.reload("YOUR_FORM_ID");
// Change theme for all forms
TBitForms.setTheme("tbitDark");

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Contact Form</title>
  <script src="https://exapps.tbit.io/embed/forms.js"></script>
</head>
<body>
  <h1>Contact Us</h1>
  
  <div id="tbit-form" 
       data-form-id="507f1f77bcf86cd799439011"
       data-width="100%"
       data-height="auto"
       data-theme="tbitLight">
  </div>
  <script>
    document.getElementById("tbit-form")
      .addEventListener("tbitFormSubmitted", (e) => {
        alert("Thank you for your submission!");
      });
  </script>
</body>
</html>

Need Help?

Questions or issues?
Check out our Forms Documentation or contact support at [email protected]