How to add digital signatures in Bubble

The simplest reliable way to add digital signatures in Bubble is to embed a signature pad element (from a Bubble plugin), let the user draw the signature, save it as an image file in your database, and attach that image anywhere you need (PDF, email, record, contract). Bubble does not have a native signature element, so you must use a plugin or an external widget.

What You Actually Need

A “digital signature” in Bubble almost always means: the user draws their signature with a mouse or finger, Bubble converts it to an image, and you store that image in a field such as Signature Image (image). This is fully accepted in most app use‑cases.

• Use a Bubble plugin like Signature Pad or Canvas Signature.
• The element outputs an image file or Base64 image.
• You save it in a workflow like When Save is clicked → Make changes to Thing → Signature Image = SignaturePad’s image.

Step-by-Step Setup

• Install a plugin such as Signature Pad from the Bubble plugin marketplace.
• Place the signature element on your page. It works like any other input.
• Add a button “Save Signature”.
• Create a workflow: When Save Signature is clicked → Make changes to Current User (or another Thing).
• Set the field Signature Image to the plugin’s image output. Most plugins expose something like Signature Pad A’s Image.

Saving Signature as a File

Most signature plugins return an image file directly, but some return Base64. If your plugin returns Base64, convert it using Bubble’s built‑in “Generate image from Base64” action.

// Example: backend workflow receives Base64 and creates a file
Input: base64_signature (text)

Return: file

// In Bubble backend workflow action:
"Generate image from Base64" = base64_signature

Adding Signature to a PDF

• If you generate PDFs, tools like PDFConjurer or SelectPDF accept an image field, so you can insert the saved signature image inside the PDF layout.

Security & Privacy Rules

• Create a field signature\_image (image) on the object you store.
• In Privacy Rules, allow only the owner or admin roles to view this image.
• Never store signatures in an unrestricted data type.

External Option (for Legal-Grade E‑Signatures)

• If you need legally binding, time‑stamped e‑signatures (like DocuSign), use the API Connector and redirect the user to DocuSign’s signing URL, then receive a webhook when completed.

This setup keeps it simple for standard apps while supporting more advanced legal workflows when required.