If you have multiple visitor types, you’ll configure this setting per visitor type.
These instructions only work if you’re using Envoy badges or Brother DK-1202 model badges. Please check the back of your badges to ensure you see 202 beside the black box.

Enabling custom CSS

Go to Visitors > Settings > Sign-in flow page.
Select the visitor type you wish to edit.
Select Badge from the top navigation.
Locate Badge CSS and click “Enable.”

5. Locate the CSS rules with line numbers on the left side of the text area. Refer to these line numbers when copying and pasting the modifications that follow.

If you see the “Reset to default” link, click it now to reset all CSS code to the Envoy default.

6. Make edits to the CSS based on the guides below. Note that as you make changes, they’ll appear live in the badge preview.

7. Once you like the preview, click “Save.”

Common badge design changes

Below, you’ll find instructions for a few of the most common design requests we receive. All of these changes are easy to make with tweaks to the badge CSS.

Change the badge font

You can print your badges in any iOS supported font.

Choose a font from the supported list found here.
Locate line 18.
Replace Cera Pro with your preferred font name. Here, we’ve changed it to Georgia-Bold.

Make the visitor photo larger

You can resize the visitor photo to be larger or smaller than the default.

Locate line 83 in your CSS area.
Copy and paste the code below to replace line 83 through line 99.

.photo img {
width: 400px;
border-radius: 50%;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

.visitor-info {
width: 100%;
text-align: center;
}

.photo + .visitor-info {
width: 600px;
text-align: left;
float: right;
}

To make further adjustments, locate width: 400px on line 84 and width: 600px on line 96. You can edit these numbers to meet your needs. Note that these two numbers must add up to 1000px.

Make the visitor photos square

You can change the visitor photos to appear square instead of round. Choose hard corners or rounded corners.

Decide if you’d like hard corners or round corners.
Locate line 85 in your CSS area.
1. For squares with hard corners: copy and paste this code to replace line 85 to border-radius: 0%; .
2. For squares with round corners: copy and paste this code to replace line 85 to border-radius: 20%; .

Change the size of the visitor name

You can resize the visitor name to be larger or smaller than the default.

Locate line 110. If your visitor has a short name, first and last name fit on one line on the badge. This CSS line controls the size of this text.
Modify line 110 as needed:
1. Numbers larger than 100px will make the text larger.
2. Numbers smaller than 100px will make the text smaller.
Locate line 102. If your visitor has a long name, the last name will wrap down to the next line on the badge. This CSS line controls the wrapped line of text.
Modify line 102 as needed:
1. Numbers larger than 74px will make the text larger.
2. Numbers smaller than 74px will make the text smaller.

Make the visitor information text larger or smaller

Make the display for your Custom Field 1, Custom Field 2, Time of Entry, and Custom Message larger or smaller.

Locate line 19 in your CSS area.
Modify line 19 as needed:
1. Numbers larger than 40px will make the text larger.
2. Numbers smaller than 40px will make the text smaller.

Move visitor information down

Move the visitor information further away from the logo at the top.

Locate line 72 in your CSS area.
Modify line 72 as needed:
1. Numbers larger than 50% will move the visitor information down.
2. Numbers smaller than 50% move the visitor information up.

Remove the “NO NDA” Badge Icon

If your location utilizes legal docs, particularly optional Non-Disclosure Agreements, the badge will indicate an NDA was not signed with a circular “NO NDA” icon. The following steps will utilize CSS to hide the “NO NDA” icon.

Locate and select the “did-not-sign” style in your CSS area, this is typically line 130.
Copy and paste the code below over the entire style block of “.did-not-sign”, this typically represents line 130 to line 147.

.did-not-sign {
display: none;
position: absolute;
bottom: 80px;
right: 0;
width: 150px;
height: 150px;
background: #000;
border-radius: 50%;
color: #fff;
font-weight: bold;
text-align: center;
padding-top: 25px;
line-height: 50px;
font-size: 50px;
z-index: 1000000;
}

Support

We will offer support that is within our scope, Customizing the CSS technical, and we strongly recommend that you work with a web developer or designer for the best results.