Delver Blog

Customizing Themes in Delver X

Sun, 29 Jun 2025 00:00:00 GMT

Overview

Delver X extensions allow you to personalize your experience, and one of the simplest yet most impactful ways is by creating custom themes. You can change the entire color scheme of the application to suit your preferences.

Theme extensions are small Javascript files that use the delver.setTheme() API function to apply new colors. Like all extensions, they run in a sandboxed environment and activate as soon as the app loads.

The `setTheme` API

The core of any theme extension is the delver.setTheme() function. This function takes a single object that specifies the colors you want to override. You don't need to define every color; any color key you omit will keep its default value.

Here are the color keys you can customize:

Primary Theme Colors

These define the main branding colors of the application. Delver for Magic the Gathering is blue/dark blue while Pokemon is blue/green, for instance.

primary: The main primary color.
primary-dark: A darker shade of the primary color.
primary-light: A lighter shade of the primary color.
secondary: The secondary color.

Text Colors

Color of text in both light and dark modes. Numbers go from darker (100) to lighter (300), for both light and dark values.

text-color-100: Main text color for light mode.
text-color-200: Secondary text color for light mode.
text-color-300: Tertiary/disabled text color for light mode.
dark-text-color-100: Main text color for dark mode.
dark-text-color-200: Secondary text color for dark mode.
dark-text-color-300: Tertiary/disabled text color for dark mode.

Background Colors

Background surfaces for both light and dark modes. Numbers go from darker (100) to lighter (300), for both light and dark values.

background-color-100: Base background for light mode.
background-color-200: Primary surface color for light mode.
background-color-300: Secondary surface color for light mode.
dark-background-color-100: Base background for dark mode.
dark-background-color-200: Primary surface color for dark mode.
dark-background-color-300: Secondary surface color for dark mode.

Demo: A "True Dark" Theme

Let's create a simple extension that makes the default dark theme even darker. Feel free to experiment with different color values to create your perfect theme.

How to Use

Create a new file on your computer and name it true-dark.js.
Copy the code below and paste it into your new file.
In Delver X, navigate to the Extensions page, tap Create then Install. Select the true-dark.js file you just created.
The new, darker theme will be applied immediately.

Full Extension Code

/*
 * @id true-dark
 * @name True Dark
 * @version 100
 * @short_description Make the dark-theme even darker
 * @description_start
 * This extension uses the setTheme API to apply a theme that is darker than the default dark theme.
 * @description_end
 * @icon_start
 * <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 24 24">
 * <path fill="white" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
 * </svg>
 * @icon_end
 * @developer Delver Lab
 * @developer_url [https://delverlab.com](https://delverlab.com)
 */

delver.setTheme({
    colors: {
        primary: '#020617',
        'primary-dark': '#000000',
        'primary-light': '#0f172a',
        secondary: '#000000',

        // Override dark mode background colors
        'dark-background-color-100': '#000000',
        'dark-background-color-200': '#020617',
        'dark-background-color-300': '#0f172a'
    }
});

Extensions for Delver X

Sat, 28 Jun 2025 00:00:00 GMT

Overview

Delver X extensions allow you to build integrations and new features directly within the application. This guide will walk you through the process of writing and using your own extensions.

Extensions in Delver X operate within a sandboxed iframe and activate as soon as the page loads. They communicate with the main application through a message-passing system. A global delver object is available within the extension's scope.

The extension API is designed to be minimal and evolve based on developer needs. If you find the current API lacking for your project, we encourage you to reach out to us at contact@delverlab.com.

Quick Start

Let's create a very simple extension to get a feel for the process. This "True Dark" extension uses the delver.setTheme() API function to make the default dark theme even darker. The entire extension is contained in a single Javascript file.

How to Use

Create a new file on your computer and name it true-dark.js.
Copy the code below and paste it into your new file.
In Delver X, navigate to the Extensions page, tap create then install. Point to the true-dark.js file you created.
The new theme will be applied immediately.

Extensions are synchronized with your Delver account. This means that once you install an extension on one device, it will automatically be installed on any other device you're signed into.

Full Extension Code

/*
 * @id true-dark
 * @name True Dark
 * @version 100
 * @short_description Make the dark-theme even darker
 * @description_start
 *  This extension sets a dark theme that's darker than the one available in the app.
 *  This is also a good example of how to use the setTheme API.
 * @description_end
 * @icon_start
 * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 * <path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
 * </svg>
 * @icon_end
 * @developer Delver Lab
 * @developer_url https://delverlab.com
 */

delver.setTheme({
	colors: {
		primary: '#020617',
		'primary-dark': '#000000',
		'primary-light': '#0f172a',
		secondary: '#000000',

		// background colors
		'dark-background-color-100': '#000000',
		'dark-background-color-200': '#020617',
		'dark-background-color-300': '#0f172a'
	}
})

More Complex Extension

The Dropbox Sync extension showcases advanced extension capabilities.

Download the Sample Project: The Dropbox Sync extension code is available here.
Modify the Code: Adapt the sample code to fit your needs. The sample demonstrates key concepts you may need, such as handling starting up, downloading additional libraries and handling user interaction.
Upload and Install: Once your extension is ready, you can upload and install it directly within Delver X in the Extensions page.

The Extension Manifest

You need to provide a manifest with several required fields within your extension's file. Here is a breakdown of the manifest fields using the "Dropbox Sync" extension as an example:

@id: A unique, machine-readable identifier for your extension.
```
* @id dropbox-sync
```
@name: The human-readable name of your extension that will be displayed in the UI.
```
* @name Dropbox Sync
```
@version: A numeric version for your extension. We recommend a number between 100 and 999 for your initial release. While the version is ignored when an extension is manually installed, it's used for the update process. Versions are displayed with dots inserted every two digits from the right. For instance, 100 becomes "1.00", and 10001 is displayed as "1.00.01".
```
* @version 100
```
@short_description: A concise, one-line summary of what your extension does.
```
* @short_description Sync with Delver Android using Dropbox Sync
```

@description_start / @description_end: The full description of your extension. This field supports Markdown for rich formatting. Everything between these two tags will be parsed.

* @description_start
* Sync manually with Delver Android via Dropbox Sync.
*
* ## How Dropbox Sync works in Delver Android
*
* 1. Delver Android uploads two files to Dropbox: user and images.
* 2. You can manually restore these files in Delver Android.
* 3. You can force Delver Android to upload these files.
*
* ## What this extension does
*
* Adds a new "Dropbox Sync" item to the main screen's side menu.
* From there, you can:
*
* 1. Import the user and image files from Dropbox.
* 2. Export the local data to Dropbox where you can then restore it in Delver Android.
*
* This extension facilitates syncing between both apps.
* Note that synchronization is not automatic;
* manual import/export between apps is necessary.
*
* ## Limitations
*
* - List background image is not synced.
*
* @description_end

@icon_start / @icon_end: The icon for your extension. While SVGs are preferred, you can also use a base64 encoded image. Note that icons are displayed against a white background. All entries are sanitized, so scripts will not be executed.

* @icon_start
* <svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"
* viewBox="0 0 24 24" fill="#1e40af">
* <path d="M3 6.2L8 9.39L13 6.2L8 3L3 6.2M13 6.2L18 9.39L23 6.2L18 3L13 6.2M3 12.55L8 15.74L13 12.55L8 9.35L3 12.55M18 9.35L13 12.55L18 15.74L23 12.55L18 9.35M8.03 16.8L13.04 20L18.04 16.8L13.04 13.61L8.03 16.8Z" />
* </svg>
* @icon_end

@developer: The name of the person or entity that developed the extension.
```
* @developer Delver Lab
```

@developer_url: A link to the developer's website or profile.

* @developer_url [https://delverlab.com](https://delverlab.com)

The Delver X Extensiosn API

Your extension lives in a sandboxed iframe and communicates with the Delver X application by passing messages back and forth. A global delver object is available to facilitate this interaction.

The complete API, including the source code, is available for your reference here. This file is the definitive source for understanding the available functionalities.

Our philosophy is to add features to the API as they are requested by developers. If you have specific needs, please contact us at contact@delverlab.com to discuss them.

Here's a non-exhaustive list of some functions that are available to you:

importScript: Loads an external script, like a third-party library.
createMainMenuItem: Adds a clickable item to the main side menu.
createTextSetting: Creates a text-based setting in the extension settings menu.
[set/get]Setting: Stores and retrieves the value of a setting.
displayDialog: Shows a dialog box with a title, custom HTML content, and optional action buttons.
displayProgressDialog: Displays a progress dialog for long-running operations.
displayToast: Shows a temporary, non-intrusive notification message.
oauthSignIn: Initiates a third-party OAuth sign-in flow.
oauthGetToken: Retrieves a stored OAuth access token.
oauthSignOut: Signs out by removing a stored OAuth token.
exportV2: Exports the user's collection data and images as files for backup or transfer.
importV2: Imports data from files generated by exportV2.
setTheme: Customizes the theme by applying custom colors.

Handling Authentication

If your extension requires users to sign in to a third-party service, the Dropbox Sync extension provides a clear example of how to manage the OAuth2 token exchange with the Dropbox API.

Session tokens are stored in the user's localStorage. Delver X ensures that only your extension can access the session tokens your extension creates.

Important: Always ensure that you do not expose a token with more permissions than is absolutely necessary for your extension to function.

The Future of Extensions

The Delver X extension system is being developed in phases:

Phase 1: (Current) Install and uninstall extensions.
Phase 2: Publish extensions for other users to discover and install.
Phase 3: Enable monetization for published extensions.

Publishing Your Extension

While direct publishing of extensions is not yet supported, we are actively looking for developers interested in sharing their creations with the Delver community. If you have an extension you'd like to publish, please contact us with information about what you've built.

Here are some guidelines for publication to keep in mind:

Strive for perfection. Your extensions should be useful, simple, and focused.
Write clearly. We value straightforward communication over marketing jargon.
Respect your user's intelligence.
Make something people want.

Sync Delver Lens and Delver X

Sat, 08 Mar 2025 00:00:00 GMT

Overview

This guide explains how to sync your collection between Delver Lens (android app) and Delver X (web).

Delver Lens

Tap the main screen side menu header to sign in/sign up.
After signing in, tap the header again to access the sync options.
Tap Backup Now to send your collection to Delver Web.

A brief "Backup complete" message appears along the bottom to confirm the backup was created.
Use Restore when importing from Delver Web.

Any cards in Delver Lens but not on Delver Web will be lost. Delver Lens will delete everything and copy over cards from Delver Web. Be careful using this option.

Delver X

Tap "sign-in to save" on the top-left to sign in/sign up.
After signing in, the top-left button again to open options.
Under Delver Lens Android, tap Import to get your collection from Delver Lens.

When using Overwrite, any cards in Delver Web but not in Delver Lens will be lost. Delver Web will delete everything and copy over cards from Delver Lens. Be careful when using this option.
Use Export to send your collection from Delver Web to Delver Lens.

A confirmation message is displayed when your collection is exported and ready to be restored on Delver Lens.

Troubleshooting

Sync Failed

Verify you're signed in with the same account on both apps
Try signing out and back in
Try clearing app cache and try again

Don't delete the app's data, just clear the cache.
If problems persist, contact support

Missing Cards After Sync

Check if both Delver Lens and Delver X are updated
Check if the card exists in both apps

The database on Delver Lens and Delver X may differ. The behavior of the apps is to not show the card if it doesn't exist in the internal database.

API Integration via Webhooks

Fri, 07 Mar 2025 00:00:00 GMT

Overview

Webhooks are a way for you to write custom code that runs when:

New cards are scanned
The scanner is paused or resumed

This enables powerful automation possibilities. For example, you could:

Build a machine that physically moves cards in and out of Delver as they're scanned
Auto-populate a spreadsheet with scanned card data
Trigger custom workflows when cards are added or modified

Note: Webhooks are a Pro feature. You can enable and test the functionality for free, but you'll need an active subscription to receive actual card data. Visit delver.app/#pricing for subscription information.

Delver Webhook Server

The Delver Webhook Server receives webhook requests from Delver and holds the information until you retrieve it. This allows you to use webhooks without worrying about HTTPS or CORS.

Enable Webhook Server

Navigate to Main Screen -> Side Menu -> Settings -> Advanced -> Delver Webhook Server.

Click the Generate button to generate a new endpoint.

That's it! You're all set.

Test Webhook Server

You can test it out directly by pasting the endpoint into a browser. The first response the browser will show is:

{ "type": "endpoint_created" }

If you refresh the browser, the server will wait up to 10 seconds and then timeout with response code 404 and the following json:

{ "type": "not_found" }

Now scan a couple of cards with Delver and refresh the browser again. You should see a json indicating the scanner started and cards that have been scanned.

Note: The endpoint is open and only secured by the endpoint URL. Ensure the URL remains secret. Generate a new one if you suspect it has been compromised. Don't put on Github!

Enable Webhooks (Advanced)

Navigate to Main Screen -> Side Menu -> Settings -> Advanced -> Enable Webhooks.

Still under Settings, set the Webhook Endpoint to the URL of your server.

Except for localhost, the endpoint must use HTTPS and must return CORS headers.

HTTPS

Enabling HTTPS requires advanced knowledge of IT infrastructure. You can use this tutorial to deploy certificates in your local network (link). You can also use proxy services like ngrok.

CORS

Remember to set CORS headers in your response.

{
	"Access-Control-Allow-Origin": "*",
	"Access-Control-Allow-Methods": "POST, OPTIONS"
}

Alternative to HTTPS and CORS

If you're not confident or don't have the time to setup HTTPS, use the Delver Webhook Server. It was designed to be used in place of you developing your own server.

Types of Requests

Delver X sends webhook requests during active card recognition sessions.

Webhook Server Responses

When using the Delver Webhook Server, you may receive the following response types:

The following response indicates that your endpoint was successfully created in the webhook server. You'll see this only when first accessing a newly generated endpoint URL.

{
	"type": "endpoint_created"
}

The following response (with HTTP status code 404) occurs when polling the server but no new events are available within the 10-second timeout period.

{
	"type": "not_found"
}

Scanner Status

When you open the recognition page and scanning becomes active:

POST /<HTTP Post Endpoint>
{
	"type": "scanner_started"
}

When scanning is paused or you navigate away from the scanning page:

POST /<HTTP Post Endpoint>
{
	"type": "scanner_paused"
}

Card Events

When a new card is scanned:

POST /<HTTP Post Endpoint>
{
	"type": "card_scanned",
	"cards": [{
		"cardId": 6128,
		"quantity": 1,
		"name": "Birds of Paradise",
		"edition": "Secret Lair Drop",
		"number": "92",
		"priceUser": "",
		"fmtPriceUser": "-",
		"priceAcquired": 0.0,
		"condition": "",
		"language": "",
		"listName": "Temporary",
		"listType": -1,
		"board": 0,
		"manaCost": "<svg version=\"1.1\" viewBox=\"0 0 600 600\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"300\" cy=\"300\" r=\"300\" fill=\"#9bd3ae\"/><path d=\"m562.6 337.4c0 10-3.9 19-11.6 27s-16.6 12-26.6 12c-16 0-27.7-7.5-35.2-22.5l-35.2-1.5c-7.5 0-22.3 3.3-44.2 9.8-23.5 6.5-37 11.7-40.5 15.7-5.5 6-10 20-13.5 42-3 18-4.5 31.2-4.5 39.7 0 13.5 2.1 23.4 6.4 29.6s13 11.5 26.2 15.7 21.4 6.6 24.4 7.1c2 0 5.2-0.2 9.8-0.7h9c6.5 0 13.2 1 20.2 3 10 3 14.3 7 12.8 12-7-1-19.2 0.5-36.7 4.5l21 10.5c0 6-8.5 9-25.5 9-4.5 0-10.6-1-18.4-3-7.7-2-12.9-3-15.4-3h-9.7c-0.5 5-2 12.5-4.5 22.5-8.5-0.5-18.5-5.5-30-15s-18.7-14.2-21.7-14.2-7.3 4.8-12.7 14.2c-5.5 9.5-8.2 16-8.2 19.5-6.5-3.5-12-10-16.5-19.5-2-6.5-4.2-13-6.7-19.5-5 0.5-14.2 11-27.7 31.5h-3.8c-1-1.5-4.8-12-11.2-31.5-15.5-5-30-7.5-43.5-7.5-6.5 0-16.5 1.5-30 4.5l-21-1.5c3-3 11.7-8.7 26.2-17.2 17-10 30-15 39-15 1.5 0 3.5 0.3 6 0.8s4.5 0.8 6 0.8c3.5 0 9.1-1.9 16.9-5.6 7.7-3.7 12.2-7.1 13.5-10.1s1.9-10.8 1.9-23.2c0-28.5-7.5-49.7-22.5-63.7-13-12.5-34.5-21.5-64.5-27-8 28.5-30.5 42.7-67.4 42.7-12 0-24-7.2-36-21.7-12.3-14.8-18.3-28-18.3-40 0-18.5 7.7-33.7 23.2-45.7-12.5-13-18.7-26.2-18.7-39.7 0-12.5 3.9-23.5 11.6-33s17.9-15 30.4-16.5c-1-16 4.2-27 15.7-33-5.5-5.5-8.2-15.2-8.2-29.2 0-16.5 5.5-30.2 16.5-41.2s24.7-16.5 41.2-16.5c18 0 32.7 6.3 44.2 18.8 14.5-49.5 45.7-74.2 93.7-74.2 25 0 47 10 66 30 7 7.5 10.5 11.5 10.5 12-6 0-3-1.1 9-3.4 12-2.2 20.7-3.4 26.2-3.4 19.5 0 36.7 7.2 51.7 21.7 13 13 22 29.5 27 49.5 3.5 0.5 9 2 16.5 4.5 11 5.5 16.5 15 16.5 28.5 0 2.5-2 7.3-6 14.2 32 18 48 43 48 75 0 9-3.5 21.5-10.5 37.5 13 7.5 19.5 18.5 19.5 33m-308.8 33v-9.7c0-11.5-5.6-22-16.9-31.5-11.2-9.5-22.6-14.2-34.1-14.2-14 0-27 3.2-39 9.7 26.5-1.5 56.5 13.8 89.9 45.7m-13.5-92.9c-7.5-8.5-14-17.2-19.5-26.2-21 5.5-31.5 11.7-31.5 18.7 6-0.5 14.7 0.6 26.2 3.4s19.7 4.1 24.8 4.1m45.7-23.2v-33c-12-2-19.3-3-21.7-3v11.2l21.7 24.7m97.4-21c-6-2.5-17.2-7.5-33.7-15v64.5c23.5-13.5 34.7-30 33.7-49.5m41.2 88.5-16.5-20.2c-10 7-20.1 14.1-30.4 21.4-10.3 7.2-19.1 15.4-26.6 24.4 22.5-12 47-20.5 73.4-25.5\" fill=\"#00160b\"/></svg>",
		"type": "Creature — Bird",
		"artist": "Ovidio Cartagena",
		"legal": "mlvyhbc",
		"restricted": "",
		"rules": "Flying\n<svg width=\"100\" height=\"100\" enable-background=\"new -945 -210.002 1045 730.002\" version=\"1.1\" viewBox=\"-945 -210 100 100\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(0 -525)\">\t<circle cx=\"-895\" cy=\"365\" r=\"50\" fill=\"#cac5c0\"/><path d=\"m-859.67 373.92h-36.004l13.185-9.383c-4.898-3.887-10.566-5.828-16.984-5.828-3.211 0-5.414 0.613-6.59 1.836-1.184 1.227-1.777 3.445-1.777 6.654 0 8.873 4.563 18.34 13.691 28.396l-10.391 10.521c-12.09-14.705-18.129-27.844-18.129-39.424 0-6.928 2.086-12.447 6.27-16.545 4.18-4.098 9.746-6.148 16.668-6.148 8.453 0 17.664 3.215 27.641 9.635l7.728-13.182z\" fill=\"#0d0f0f\"/></g></svg>: Add one mana of any color.",
		"rulings": "",
		"reserved": "0",
		"altCardId": 0,
		"imageId": -1,
		"dataCardId": 53574,
		"editionId": 586,
		"rarity": "R",
		"editionCode": "sld",
		"finish": "regular",
		"deleted": 0,
		"uuid": "EF4A084815A24007A93A697EFB7B6E84",
		"cardType": "Creature — Bird",
		"imageUuid": "",
		"nameId": 151,
		"listUuid": "51B2A9169E35442AA413EDCEA3E1B297",
		"scryfallId": "fdfeeb64-0f86-45e9-97e3-dcec72683164",
		"price": 8.359999656677246,
		"fmtPrice": "$8.35",
		"priceVariation": 0.0,
		"fmtPriceVariation": "↓ $0.00",
		"tcgMid": 8.359999656677246,
		"fmtTcgMid": "$8.35",
		"mkmTrend": 9.489999771118164,
		"fmtMkmTrend": "$9.49",
		"ckRetail": 10.989999771118164,
		"fmtCkRetail": "$10.99",
		"ckBuylist": 0.0,
		"fmtCkBuylist": "-",
		"chRetail": 0.07999999821186066,
		"fmtChRetail": "0.08 TIX"
	}]
}

Note: If you don't have Delver Pro, "Birds of Paradise" is returned.

Sample Code

Here's a simple example that polls the Delver Webhook Server endpoint continuously. To install the dependencies, run pip install requests.

import requests
import time

# Paste the endpoint URL here
webhook_url = "https://api.delver.app/webhook/quick-brown-fox-jumps-over-the-lazy-dog"

def poll_webhook_server(endpoint_url):
    while True:
        try:
            response = requests.get(endpoint_url)
            if response.status_code == 200:
                data = response.json()
                print(f"Received event: {data}")
            elif response.status_code == 404:
                print("No new events")
            else:
                print(f"Unexpected status code: {response.status_code}")
        except Exception as e:
            print(f"Error polling webhook server: {e}")
        # Wait 1 second before next poll
        time.sleep(1)

if __name__ == '__main__':
    poll_webhook_server(webhook_url)

Sample Self-Hosted Webhook Server

Here's a simple example to help you get started. To install the dependencies, run pip install flask. Make sure to host this server over HTTPS or have a proxy service like ngrok to provide a HTTPS endpoint for you.

from flask import Flask, request, jsonify

app = Flask(__name__)

# Function to add CORS headers
# This is necessary because requests come from a webview/browser on Delver X
# The browser may refuse to send the request after receiving a preflight
# that doesn't have the correct CORS headers
def add_cors_headers(response):
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS'
    response.headers['Access-Control-Allow-Headers'] = 'Content-Type'
    return response

@app.route('/', methods=['POST', 'OPTIONS'])
def webhook():
    if request.method == 'OPTIONS':
        return add_cors_headers(jsonify({'message': 'CORS preflight'})), 200

    data = request.json
    print(data)

    if data['type'] == 'card_scanned':
        print(f"New card scanned: {data['card']}")
    elif data['type'] == 'scanner_started':
        print("Scanner started")
    elif data['type'] == 'scanner_paused':
        print("Scanner paused")

    return add_cors_headers(jsonify({'message': 'OK'})), 200

if __name__ == '__main__':
    app.run(port=5000)

Troubleshooting

When using the Delver Webhook Server, make sure both Delver X and the device you using for sending the requests have access to the internet.

You can try pinging api.delver.app to see if the endpoint is reachable.

If you're not using the Delver Webhook Server and is hosting your own server, here are a few things to check in case you don't receive webhook requests:

Make sure the Webhook Endpoint is correct.
Make sure the endpoint is reachable from the device running Delver X.
Make sure the endpoint is HTTPS and CORS headers are returned.
Inspect the developer console on Delver X and check for error messages of the type failed to send request to <post URL> - code: <response code>. The code will be 0 if the endpoint is unreachable.

Final Notes

If you find any issues, please let us know at support@delverlab.com. Suggestions and improvements are welcome!

Delver Blog

Customizing Themes in Delver X

Overview

The setTheme API

Primary Theme Colors

Text Colors

Background Colors

Demo: A "True Dark" Theme

How to Use

Full Extension Code

Extensions for Delver X

Overview

Quick Start

How to Use

Full Extension Code

More Complex Extension

The Extension Manifest

The Delver X Extensiosn API

Handling Authentication

The Future of Extensions

Publishing Your Extension

Sync Delver Lens and Delver X

Overview

Delver Lens

Delver X

Troubleshooting

Sync Failed

Missing Cards After Sync

API Integration via Webhooks

Overview

Delver Webhook Server

Enable Webhook Server

Test Webhook Server

Enable Webhooks (Advanced)

HTTPS

CORS

Alternative to HTTPS and CORS

Types of Requests

Webhook Server Responses

Scanner Status

Card Events

Sample Code

Sample Self-Hosted Webhook Server

Troubleshooting

Final Notes

The `setTheme` API