Business Card Widget Widget

Give your footer, contact page or sidebar a finished digital business card: logo, name, tagline, phone, email, website, address, opening hours and up to six profiles, with one-tap Call, Email, Website and Directions buttons, a booking button, and a Save contact (.vcf) download that drops your details straight into a visitor's phone.

Business & Contact Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
One item per line. Long content is carried after the # in the embed code, so it never reaches a server.
One item per line. Long content is carried after the # in the embed code, so it never reaches a server.
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/business-card-widget" title="Business Card Widget by A2Z Tools" width="100%" height="720" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

You type the card once in the builder; every value rides in the embed code, so nothing is kept on an A2Z server. The phone number is reduced to digits with an optional leading plus - +1 (555) 014-2200 becomes tel:+15550142200 - and refused if it has letters or more than 15 digits, the E.164 maximum. Email must look like [email protected]; a bare website such as acme.example gains https://. Directions open Google Maps with api=1&destination= followed by the URL-encoded address, and an Apple Maps link sits under the address for iPhone owners. The logo must be an https image; if it is missing or fails to load, an initials monogram (ND for Northside Dental) takes its place. Save contact writes a vCard 3.0 file: commas, semicolons, backslashes and line breaks are backslash-escaped, long lines are folded at 75 octets, and the file is created from a Blob in the browser. Until you enter a business name the card shows the clearly fictional Northside Dental sample.

Method

  • Phone: strip spaces, ( ) . - ; accept ^\+?\d{4,15}$ ; link = tel:<digits>
  • Directions: https://www.google.com/maps/dir/?api=1&destination=<encodeURIComponent(address lines joined with ", ")>; Apple: https://maps.apple.com/?daddr=<same>
  • vCard 3.0: BEGIN, VERSION:3.0, N, FN, ORG, TEL;TYPE=WORK,VOICE, EMAIL, URL, ADR;TYPE=WORK:;;<street lines>;;;;, NOTE, X-SOCIALPROFILE, END - CRLF line ends
  • Text escaping: \ -> \\, newline -> \n, ; -> \;, , -> \, ; fold any line over 75 octets with CRLF + one space, never inside a UTF-8 character
  • QR (optional, qr=1): the website address encoded with the same qr-code-styling engine as the A2Z QR Code Generator, error correction M

Worked examples

Default sample card

Inputs: No settings

Result: Northside Dental; Call tel:+15550142200; Directions https://www.google.com/maps/dir/?api=1&destination=1200%20Harbor%20Avenue%2C%20Suite%204%2C%20Springfield%2C%20IL%2062701

The fictional sample shown until a business name is entered; the two address lines are joined with ", " before encoding.

vCard escaping

Inputs: Name Northside Dental; address 1200 Harbor Avenue, Suite 4 / Springfield, IL 62701

Result: ADR;TYPE=WORK:;;1200 Harbor Avenue\, Suite 4\nSpringfield\, IL 62701;;;;

Commas are escaped as \, and the line break between the two address lines becomes \n, as RFC 2426 requires.

Publisher card, phone only

Inputs: name=Acme Plumbing; phone=+44 20 7946 0000

Result: Acme Plumbing with a single Call button (tel:+442079460000) and Save contact

Once a name is set, only the fields you filled in appear - no sample address or links leak in.

Limitations

  • Shows one location; a business with several branches needs one card per branch.
  • Does not add schema.org markup to your page and does not sync with Google Business Profile - keep both up to date yourself.
  • The vCard keeps the whole address in the street field and does not embed the logo image, which most contacts apps ignore for remote URLs anyway.
  • Opening hours are a single line of text; the card does not compute open or closed now - use the Business Hours widget for that.

Where publishers use it

  • A dental, physiotherapy or veterinary clinic footer where patients want to call or get directions in one tap
  • A freelancer's or consultant's About page where the .vcf download replaces typing a number into a phone
  • A restaurant or cafe sidebar on Wix, Squarespace or WordPress showing hours, address and a Book a table button
  • Real-estate agent and insurance broker profile pages that need a polished contact block without a plugin
  • Trade-show and event landing pages, with the optional QR code so visitors at a stand can open the website

Questions

What is in the .vcf file the Save contact button creates?

A vCard 3.0 record (RFC 2426) with the business name as FN and ORG, the phone as TEL;TYPE=WORK,VOICE, the email, the website as URL, the address as a work ADR, the tagline and hours in NOTE, and each social profile as X-SOCIALPROFILE. iPhones, Android Contacts, Outlook and Gmail import it; Apple Contacts also reads X-ABShowAs:COMPANY so the card files under the company name rather than a person.

Why does the address show up as a street only when imported?

A vCard address has seven fixed parts - post office box, extended address, street, city, region, postcode, country - and a free-text address cannot be split into them reliably for every country. The card puts all your address lines, joined by line breaks, in the street part. Every contacts app shows it correctly; only per-field search by city is lost.

Does the card add LocalBusiness schema to my page for Google?

No, deliberately. The card runs inside an iframe, and search engines credit structured data to the page that contains it, which here is A2Z's frame, not your site. If you want rich results, paste your own JSON-LD (type LocalBusiness or a subtype such as Dentist, with name, telephone, address and openingHoursSpecification) into your page template. Keep the name, phone and address identical to the card and to your Google Business Profile.

How do I install it on Wix, Squarespace, Shopify or WordPress?

Copy the iframe code from the builder. Wix: Add > Embed Code > Embed HTML. Squarespace: a Code block (Business plan or higher). Shopify: a Custom Liquid section. WordPress: a Custom HTML block. Give the iframe the height shown in the builder - about 720 px for the default card at 480 px wide - or add the optional loader script so the height adjusts itself.

Which phone formats are accepted?

Anything that is digits plus spaces, brackets, dots or dashes, with an optional leading +, from 4 to 15 digits. +44 20 7946 0000 becomes tel:+442079460000. Write numbers in international form if visitors call from abroad; a local 020 number dials only from inside the same country.

Can I use my own logo and colours?

Yes. The logo must be an https image address (PNG, SVG, JPEG or WebP, ideally square, at least 144 x 144 px for sharp display); http and data: addresses are refused because the frame only loads https images. The accent colour option in the builder recolours the Call button, monogram and CTA, and the theme option gives a designed dark mode.

What happens when a visitor uses the card?

Call, Email and the .vcf download use the visitor's own phone or mail app. Website, Directions and social links open in a new tab with rel=noopener. The card itself records nothing beyond an anonymous load and first-use count per widget, with no cookies and none of your card text.

Sources

  1. RFC 2426: vCard MIME Directory Profile - IETF . vCard 3.0 properties, ADR component order, backslash escaping of comma, semicolon and newline, and folding of lines longer than 75 characters. Checked 2026-10-01.
  2. RFC 6350: vCard Format Specification - IETF . Section 3.2 line folding at 75 octets without splitting UTF-8 sequences; section 3.4 text escaping. Checked 2026-10-01.
  3. Get started with Maps URLs - Google for Developers . Directions URL https://www.google.com/maps/dir/?api=1&destination=... with a URL-encoded address. Checked 2026-10-01.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Business Card Widget
https://a2z.tools/embed/business-card-widget

Related widgets

More Business & Contact widgets →

  • Contact Buttons

    Business & Contact Tool New

    Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.

    Get code

  • Social Links Widget

    Business & Contact Tool New

    Up to 12 social profile links recognised by host name, as icons, labels or buttons.

    Get code

  • Contact QR Code (vCard)

    QR & Generators Generator

    Put name, phone, email, website and address in a QR code that saves as a phone contact.

    Get code

  • Business Hours

    Time & Date Clock & time

    Shows Open now or Closed and when you open next, in your business's own time zone.

    Get code

  • QR Code Generator

    QR & Generators Generator

    Turn any link or text into a QR code, pick colours and error correction, download PNG or SVG.

    Get code

  • Donation Tiers Card

    Business & Contact Tool New

    A giving card with suggested amounts, an optional monthly switch and a Donate link to your own page.

    Get code

Preview

CustomizeGet code