How to build a Versium extension for Airtable

1. What Airtable extensions are

2. How to set up a new extension

3. How to create an onboarding flow to collect settings and API keys

4. How to integrate an API and enrich records in Airtable

5. How to test your extension

What is an Airtable extension?

What are you building?

• Add and save Versium API keys.

• Set up the Airtable table and view for enrichment.

• Choose the field for enrichment.

• Map output fields including first name, last name, email, company domain, and business name.

• A Versium account.

• An Airtable account (Pro version required to publish, free trial available).

• An Airtable base with LinkedIn URLs ready for enrichment, including fields for First Name, Last Name, Email, Title, Business, and Company Domain. Copy this base to clone an example with the necessary formatting.

• Basic knowledge of React, as Airtable extensions are built using this framework.

Remix the extension from GitHub

1. Click on the Extensions tab in your Airtable base to go to the Airtable Extensions page.

2. Click Add an extension, then choose Remix from GitHub.

3. Type in the repository URL: https://github.com/lunchpaillola/Versium-for-Airtable

How to build a Versium extension for Airtable

1. Create a new extension

npm install -g @airtable/blocks-cli

block set-api-key <api key>

2. Set up the onboarding screen

import {
  Box,
  Button,
  Loader,
  useGlobalConfig,
  useBase,
} from "@airtable/blocks/ui";
import { APIKeyInput, CustomDialog, SettingsComponent } from "./components";
import React, { useState } from "react";

function OnboardingScreen() {

// Initialize state with configuration values
const base = useBase();
const globalConfig = useGlobalConfig();
const tableId = globalConfig.get("Table");
const table = base.getTableByIdIfExists(tableId);
const initialState = {
  apiKey: globalConfig.get("API Key") || "",
  isLoading: false,
  error: "",
  selectedTable: table,
  // other initial state variables
};

const [state, setState] = useState(initialState);

//rest of code

return (
    <Box>
      {/* Render your UI components here based on the state */}
    </Box>
  );


}

async function checkGlobalConfigPermissions() {
  const setUnknownKeyCheckResult = globalConfig.checkPermissionsForSet();
  if (!setUnknownKeyCheckResult.hasPermission) {
    updateState({
      error: setUnknownKeyCheckResult.reasonDisplayString,
    });
    return false;
  }
  return true;
}

// Validate API Key against Versium's contact endpoint
const testUrl = "https://api.versium.com/v2/contact";

try {
  const response = await fetch(testUrl, {
    method: "GET",
    headers: { "x-versium-api-key": apiKey },
  });
  // Set apiKey
  await globalConfig.setAsync("API Key", apiKey);
} catch (err) {
  // Handle error
}

return (
  <Box display="flex" flexDirection="column" padding={3}>
    {(currentStep === 0 || !apiKey) && (
      // Render API Key input
    )}
    {currentStep === 1 && (
      // Render API Key input
      // Render SettingsComponent
    )}
    {error && (
      // Render error dialog
    )}
    {isLoading && (
      // Render loader
    )}
  </Box>
);

await globalConfig.setPathsAsync([
  { path: ["Table"], value: selectedTable.id },
  { path: ["View"], value: selectedView.id },
  { path: ["LinkedIn"], value: selectedLinkedin.id },
  { path: ["fieldMappings", "firstName"], value: selectedFirstName.id },
  { path: ["fieldMappings", "lastName"], value: selectedLastName.id },
  { path: ["fieldMappings", "email"], value: selectedEmail.id },
  { path: ["fieldMappings", "title"], value: selectedTitle.id },
  { path: ["fieldMappings", "business"], value: selectedBusiness.id },
  { path: ["fieldMappings", "domain"], value: selectedDomain.id },
]);

3. Implement API integration and Data handling

import {
  initializeBlock,
  useBase,
  useRecords,
  Loader,
  Button,
  Box,
  Text,
  Heading,
  useGlobalConfig,
} from "@airtable/blocks/ui";
import React, { Fragment, useState } from "react";
import OnboardingScreen from "./OnboardingScreen";
import { CustomDialog } from "./components";

function VersiumEnrichment() {
  const base = useBase();
  const globalConfig = useGlobalConfig();
  const [isUpdateInProgress, setIsUpdateInProgress] = useState(false);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  
  const apiKey = globalConfig.get("API Key");
  const tableId = globalConfig.get("Table");
  // Additional configurations loaded here...
}

 const permissionCheck = table.checkPermissionsForUpdateRecord(undefined, {
    [FIRST_NAME_OUTPUT_FIELD_NAME]: undefined,
    [LAST_NAME_OUTPUT_FIELD_NAME]: undefined,
    [EMAIL_OUTPUT_FIELD_NAME]: undefined,
    [TITLE_OUTPUT_FIELD_NAME]: undefined,
    [BUSINESS_OUTPUT_FIELD_NAME]: undefined,
    [COMPANY_DOMAIN_FIELD_NAME]: undefined,
  });

  {!permissionCheck.hasPermission && (
            <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
              {permissionCheck.reasonDisplayString}
            </p>
          )}

async function onButtonClick() {
  setIsUpdateInProgress(true);
  const recordUpdates = await getEnrichment(apiKey, records);
  await updateRecordsInBatchesAsync(table, recordUpdates);
  setIsUpdateInProgress(false);
  setIsDialogOpen(true);
}

return (
  <Box display="flex" flexDirection="column" justifyContent="center" padding={3}>
    <Heading>Enrich Records in {tableName}</Heading>
    {isUpdateInProgress ? (
      <Loader />
    ) : (
      <Fragment>
        <Button onClick={onButtonClick} disabled={!permissionCheck.hasPermission}>
          Begin enrichment
        </Button>
        <Button onClick={() => setIsDialogOpen(false)}>Close</Button>
      </Fragment>
    )}
  </Box>
);

4. Test the extension

block run

block release

Conclusion

• Adding more endpoints from Versium’s APIs to handle different types of enrichment.

• Enhancing the UI to allow selection of specific records.

• Implementing features for larger bases to selectively enrich records.