VCF Export in Bubble: Plugin or Custom JS – What’s More Reliable?

Bubble
1

Method 1: Using Plugins (No-Code Approach)

This is the most Bubble-native method and works well if you prefer to avoid custom code.

Steps:

  1. Convert Image to Base64
    Use the “Base64 File Encoder” plugin to convert the uploaded profile photo into a Base64 string.
  2. Structure VCF Content
    Create a text field in Bubble with the vCard structure:
BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+123456789
EMAIL:john@example.com
PHOTO;ENCODING=b;TYPE=JPEG:[Base64 string]
END:VCARD
  1. Create and Download File
    Use the “Create File from Text” plugin to generate the .vcf file and make it downloadable.

Pros:

  • 100% no-code.
  • Easy to set up inside Bubble.

Cons:

  • Base64 formatting must be precise.
  • May have issues on some devices if not structured correctly.

Method 2: Using JavaScript (Custom Code Approach)

This method offers more control and flexibility, especially for handling complex formatting.

Steps:

  1. Use the “Toolbox” plugin to run custom JavaScript.
  2. In the JavaScript, build the VCF string (including Base64 image).
  3. Use a Blob and URL.createObjectURL() to trigger file download in the browser.

Pros:

  • Greater flexibility and precision.
  • Can handle edge cases more easily.

Cons:

  • Requires JavaScript knowledge.
  • Not 100% Bubble-native; may need tweaking for mobile apps.

These two method i can find if you know more method to do it please share below in reply.

Thankyou