Serpstat

Open your Bubble app editor. Click the **Plugins** tab in the left sidebar, then click **Add plugins** in the top-right area of the Plugins panel. In the search box, type **API Connector** and look for the plugin published by Bubble (the official one, shown at the top of results). Click **Install** and wait for the confirmation — the plugin appears in your installed list within a few seconds. The API Connector is Bubble's built-in tool for connecting to any REST or JSON-RPC API. It runs every call from Bubble's servers, so secrets placed in Private fields never reach the user's browser. You will not need any additional plugins for Serpstat.

In the Plugins tab, click **API Connector** to expand its configuration panel. Click **Add another API** to create a new API group. Name it **Serpstat API**. Under **Shared parameters for all calls**, click **Add shared parameter**, select **URL parameter** as the parameter type, and enter `token` as the parameter name. In the value field, paste your Serpstat API token (found at serpstat.com → Settings → API). Enable the **Private** checkbox next to this parameter. Marking the parameter Private is the critical security step: Bubble appends the token to every request URL server-side, and the token value is masked in the editor and never sent to the browser. Without Private, the token could be visible in browser network logs. Leave the base URL blank for now — you will set the full endpoint URL at the individual call level because Serpstat's v4 endpoint is a single URL: `https://api.serpstat.com/v4`.

1{
2  "group_name": "Serpstat API",
3  "shared_url_parameters": [
4    {
5      "name": "token",
6      "value": "<your_serpstat_token>",
7      "private": true
8    }
9  ]
10}

Inside the Serpstat API group, click **Add another call**. Name this call **Get Domain Info**. Set the method to **POST** and enter the endpoint URL: `https://api.serpstat.com/v4`. Under **Body**, select **JSON** as the body type. Paste the following JSON body — this is a domain info request for a known domain so the Initialize Call returns real data: ```json { "id": 1, "method": "SerpstatDomainProcedure.getDomainInfo", "params": { "domain": "apple.com", "se": "g_us" } } ``` Set the call's **Use as** setting to **Data** (since you are retrieving information, not triggering an action). Click **Initialize call** — Bubble sends the request with your Private token appended automatically and shows the raw JSON response in the preview panel. Expand the response carefully: Serpstat wraps all data inside `result` → `data`. You will see the domain's keyword count, traffic estimate, and other top-level stats. Bubble auto-detects these fields and makes them available in dynamic expressions as `Get Domain Info's result's data's keywords_count`, etc. This nested structure — `result.data` — is consistent across all Serpstat API v4 calls. Always look inside `result.data` when accessing response values in Bubble expressions.

1{
2  "id": 1,
3  "method": "SerpstatDomainProcedure.getDomainInfo",
4  "params": {
5    "domain": "apple.com",
6    "se": "g_us"
7  }
8}

Click **Add another call** inside the Serpstat API group. Name it **Get Domain Keywords**. Set method to **POST**, endpoint to `https://api.serpstat.com/v4`, and body type to **JSON**. This time, make the `domain` and `se` parameters dynamic so users can enter any domain and select a search engine. In the JSON body, replace the static values with Bubble's dynamic expression syntax — use angle bracket placeholders in the API Connector editor: ```json { "id": 1, "method": "SerpstatDomainProcedure.getDomainKeywords", "params": { "domain": "<domain>", "se": "<se_code>", "size": 100 } } ``` In Bubble's API Connector body editor, click inside the value for `domain` and toggle it to **dynamic** — this creates a dynamic parameter called `domain` that you will bind to a Text Input when calling this API from a workflow. Do the same for `se_code`. Set **Use as** to **Data**. Click **Initialize call**, filling in `apple.com` for domain and `g_us` for se_code in the Initialize Call dialog (these are test values only — they won't appear in production). Once initialized, this call exposes a list of keyword objects under `result.data`, each with fields like `keyword`, `found_results`, `cost`, `competition`, and `traff`. Bubble detects all of these as accessible fields.

1{
2  "id": 1,
3  "method": "SerpstatDomainProcedure.getDomainKeywords",
4  "params": {
5    "domain": "<domain>",
6    "se": "<se_code>",
7    "size": 100
8  }
9}

On your Bubble page, add these elements: 1. A **Text Input** element — Label it 'Enter domain (e.g. competitor.com)'. Give it the ID name `DomainInput`. 2. A **Dropdown** element — Label it 'Search engine'. Add options: g_us (US), g_uk (UK), g_de (Germany). These must be the exact Serpstat `se` codes, not display names, OR you can map them: store the display name as text but use the hidden code as value. 3. A **Button** — Label it 'Run Analysis'. This is intentional: triggering Serpstat queries on every keystroke burns API units. One button click = one query. 4. A **Repeating Group** — Set its Type of content to **Get Domain Keywords** (the API Connector data type). Set its Data source initially to empty. Now wire up the workflow: click the **Run Analysis** button, go to its workflow. Add action **Plugins → Serpstat API - Get Domain Keywords**. In the action parameters, set `domain` = `DomainInput's value` and `se_code` = `SearchEngineDropdown's value`. After this action, add a **Display data in Repeating Group** action pointing to your Repeating Group and set the data to **Result of step 1** (the API call result's `result`'s `data`). Inside the Repeating Group, add Text elements and bind them: `Current cell's keyword`, `Current cell's found_results`, `Current cell's cost`, `Current cell's competition`. For competitive research, you can add a second button 'Get Competitors' that fires the `getDomainCompetitors` method in the same way.

If your Bubble app stores any Serpstat results in the database (e.g., for caching or saving client reports), configure Data tab → Privacy rules for that Data Type. Without privacy rules, all rows are readable by any logged-in user of your app. Set a rule: 'Find this in searches: When Current User is in Admin role' — or restrict to the user who created the record. For quota protection, implement a 'last query time' Custom State on the page: 1. Add a Custom State to the page of type **date**, named `LastQueryTime`. 2. In the Run Analysis button workflow, add a **Condition** at the start: Only run if `Current date/time > LastQueryTime + 10 seconds`. This prevents users from spamming the button. 3. After the API call action, add a **Set Custom State** action setting `LastQueryTime` to the current date/time. Displaying the API unit cost estimate in a tooltip on the button is also good practice: Serpstat's getDomainKeywords with size=100 costs more units than getDomainInfo. Check your unit balance at serpstat.com → Settings → API after initial testing to understand consumption rates. Workload Units in Bubble are also consumed by each API call, workflow step, and database operation. For a public-facing tool with many users, consider caching Serpstat results in a Bubble Data Type with a 'cached_at' timestamp, and only re-querying if the cache is older than 24 hours.