This feature is only recommended to those who are familiar with CSS already. Envoy Support is not responsible for fixing any errors created by admins.
You’ll configure this setting per visitor type if you have multiple visitor types.
These instructions only work if you’re using Envoy-provided 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.”
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
font-family
Replace
Cera Prowith your preferred font name. Here, we’ve changed it toGeorgia-Bold.
Make the visitor photo larger
You can resize the visitor photo to be larger or smaller than the default.
Locate
.photo img {in your CSS area.
Copy and paste the code below to replace the
.photo img {}section
.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: 230px on line 90 and width: 770px on line 102. 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
border-radius: 50%; in your CSS area, under.photo img {For squares with hard corners: change
border-radiusto0%For squares with round corners:
border-radiusto20%
Change the size of the visitor name
You can resize the visitor name to be larger or smaller than the default.
Locate
.name:first-line {If your visitor has a short name, first and last name fit on one line on the badge.
font-size:controls the size of this text.Modify line
font-size:as needed:Numbers larger than 100px will make the text larger.
Numbers smaller than 100px will make the text smaller.
Locate
word-wrap:under.name {. 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.Locate
.name { font-size: 74px;Numbers larger than 74px will make the text larger.
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
font-size: 40px;underbody {in your CSS area.Modify
font-size:as needed:Numbers larger than 40px will make the text larger.
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
top: 50%; under.content {Modify
top:as needed:Numbers larger than
50%will move the visitor information down.Numbers smaller than
50%will 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-signstyle in your CSS area.Copy and paste the code below over the entire style block of
.did-not-sign.
.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.