Skip to main content
/Documentation

Lanyard

Create interactive 3D lanyard cards. Perfect for digital business cards, event badges, and ID cards.

Create a Lanyard
Open the interactive version

What is a Lanyard?

A Lanyard project is a 3D card hanging from a ribbon, like a conference badge. It drops into place when the page opens, and visitors can grab it and swing it around.

  • A card that swings with real physics
  • Your image on the front, and an optional one on the back
  • A ribbon in your colour, with your logo repeated along it
  • A links dock with your site, your socials or a pop-up
  • Works with a mouse or a touch screen

Best for

Digital Business Cards

Stand out with a memorable 3D presentation

Event Badges

Virtual conference or event credentials

ID Cards

Employee or member identification

Membership Passes

Club or organization membership cards

VIP Passes

Exclusive access credentials

Artist Passes

Backstage or artist credentials

Files and limits

  • Front of the card (required): an image, or a PDF from which you pick one page.
  • Back of the card (optional): an image. Without one, the back shows the card background colour.
  • Ribbon logo (optional): an image repeated along the band. A wide mark reads best, and a GIF uses only its first frame.
  • The card face is portrait, about 5 by 7 (for example 1000 by 1400 pixels), and the image is stretched to fill it, so design it at that shape.
  • Uploads count toward your workspace storage: 50 MB on Free, 10 GB on Pro, 25 GB on Business.

Create a lanyard

  1. 1. Upload the card

    Open the Content tab and add the front of the card, and the back and a ribbon logo if you have them.

  2. 2. Fit the card and the ribbon

    In Settings, under General, nudge and scale the image on the card, pick the card background and ribbon colours, and lay out the logo along the ribbon.

  3. 3. Add your links

    In the Menu tab, add links, dividers and pop-ups to the dock: your website, your socials, your contact details.

  4. 4. Share it

    Save, then copy the link or the embed code from the Share tab.

Settings

Everything below is in the editor's Settings tab, listed under the sub-tab where you find it: General, Scene or Camera.

General

Basic info (the project title and description) sits at the top for every type. Below it come the settings for the object itself.

Card

Card background color fills the back of the card when there is no back image, and sits behind your image on the front. Texture adjustments move your image on the card (horizontal and vertical position, from -1 to 1) and scale it (from 0.5 to 2), with a reset button.

Ribbon

Ribbon color sets the colour of the band. Once a ribbon logo is uploaded, four sliders lay it out: Copies (1 to 40, 8 by default), Spacing (0 to 2), Rotation (up to half a turn either way) and Offset (0 to 1).

Scene

What surrounds the object, and the Realism finish over the whole frame.

Background

A solid colour, a gradient or an image of your own (with an optional blur), plus an optional pattern on top.

Realism

Film grain over the frame (0 to 100, 15 by default), how much of it lands on the card, still or animated grain, and a vignette. A hanging card rests on nothing, so there is no surface shadow.

Camera

Where the view starts and how much visitors can move it.

Camera

Default zoom, from 50 to 200%, is how close the card starts. It is the only camera setting a lanyard has.

Hotspots, menu and sounds

Next to Files, the Content tab has two more sub-tabs: Menu and Sounds. This type has no Hotspots tab.

Sounds

Every project type can have background music. Add tracks as MP3, M4A, WAV, OGG or FLAC, up to 20 minutes each. They are compressed to about 1 MB per minute and count toward your workspace storage. You can loop the playlist, set the volume and show a small player next to the dock. Autoplay starts with the visitor's first tap or key press, because browsers block sound until then.

Film it in Studio

Every project type can be filmed in Studio. Open the project's Studio tab, pick camera moves made for this type, and turn the project into a video, a GIF, a still image or a page of its own to share. Studio reads this project's files and settings, so what you set here carries over. Read the Studio docs · See the camera moves for each type

Current limits

  • No hotspots on the card. Links go in the dock.
  • Visitors can't turn the card around to study the back: it always swings back to the front.
  • There is no pinch to zoom on a touch screen. Turn on the zoom buttons if your visitors are mostly on phones.
  • The image is stretched to the card's shape, not cropped, so an image of a different shape looks squashed.

Tips

  • Design the card image at about 5 by 7, portrait (for example 1000 by 1400 pixels), so it is not stretched.
  • Without a back image, the back shows the card background colour, so pick one that suits your brand.
  • Match the ribbon colour to your brand, and use a wide logo for the band.
  • Put your most important link first in the dock.
  • Check the swing on a phone before you share it.