> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.drimify.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Understanding Webhooks, APIs, and JavaScript Callbacks

# Integrating Drimify: A Guide to APIs, Webhooks, and JavaScript Callbacks

When building interactive experiences with Drimify, you often need that data to flow into your existing tech stack—for example, automatically adding a new lead to your CRM or triggering a custom event on your website the moment a user finishes a game.
To achieve this, Drimify offers three integration methods: **APIs**, **Webhooks**, and **JavaScript Callbacks**. Here is how to choose the right one for your business needs.

### 1. API: The "On-Demand" Data Pull

An **API (Application Programming Interface)** allows your system to request specific information from Drimify whenever you need it.

* **How it works:** Your server sends a request to Drimify asking for specific data (e.g., "Give me all the entries from the last 24 hours"). Drimify then sends that data back to you.
* **Best for:** Generating reports, syncing bulk data to your dashboard, or auditing participation numbers at the end of a campaign.
* **Key takeaway:** Your system starts the conversation.

### 2. Webhook: The "Real-Time" Push

A **Webhook** is a notification sent automatically from Drimify to your server the moment a specific event occurs.

* **How it works:** You define a "Trigger" (such as a user completing a registration form or finishing an experience). As soon as that event happens, Drimify **pushes** the user's contact details or data directly to your CRM or database URL.
* **Best for:** Real-time automation, such as instantly sending a "Welcome" email or updating a lead's profile in your CRM.
* **Key takeaway:** Drimify starts the conversation automatically based on a predefined event.

### 3. JavaScript Callback: The "In-Browser" Reaction

A **JavaScript Callback** handles communication between the Drimify widget and the website or app where it is embedded. Unlike APIs or Webhooks, this happens locally in the user's browser.

* **How it works:** Your website "listens" for actions taking place inside the Drimify iframe. When a user reaches a specific milestone, the game sends a signal to your parent page (e.g., `onComplete`).
* **Best for:** Triggering immediate visual changes on your site, such as hiding the game to reveal a hidden download link or redirecting the user to a specific landing page.
* **Key takeaway:** It connects the experience to your website’s front-end in real-time.

### Comparison & Use Cases

| **Feature** | **API** | **Webhook** | **JavaScript Callback** |
| **Direction** | Your System → Drimify | Drimify → Your System | Drimify → Your Website/App |
| **Environment** | Server-to-Server | Server-to-Server | Browser/Client-side |
| **Common Use** | Bulk data syncing | **CRM & Email automation** | **Dynamic UI changes** |
| **Example** | Pulling a weekly report | **Sending a new lead to HubSpot** | **Showing a "Claim Prize" button** |


### Understanding the "Backend" vs. "Frontend"

To choose the right method, ask yourself: **"Where does the data need to go?"**

* **To your Database or CRM (Backend):** Use **Webhooks**. This is how you send a lead’s email address or contact details securely from Drimify to your internal systems (like HubSpot, Salesforce, or a custom database). It works perfectly whether your campaign is on a website or in an app.
* **To the User’s Screen (Frontend):** Use **JavaScript Callbacks**. This is for when you want the *website itself* to react instantly to a player’s action—for example, showing a "Claim Your Discount" button on your webpage the moment they finish the game.

### Integration Comparison

| **Feature** | **Webhooks (Recommended for Data)** | **JavaScript Callbacks (Best for UX)** |
| **Connection** | **Server-to-Server** | **Browser-to-Browser** |
| **Primary Goal** | Securely transferring lead data & contact info. | Creating a seamless "live" experience on your site. |
| **Real-world Example** | Automatically adding a participant to your **mailing list**. | Hiding the game and **revealing a promo code** on your page. |
| **Security** | High (happens behind the scenes). | Direct (happens on the user's device). |

### Summary of Use Cases

Whether you are embedding Drimify on a **website** or within a **mobile app**, you will often use a combination of both:

1. A **Webhook** to ensure your marketing team gets the lead's contact details in your CRM.
2. A **JavaScript Callback** to ensure the user sees a "Thank You" message or a reward link immediately without refreshing the page.


> **Note on Callbacks:** Since JavaScript Callbacks run in the user's browser, they are excellent for user experience (UX) but should not be used for high-security data validation. For secure, server-side data transfers (like sensitive lead info), always prioritize **Webhooks**.