Configure tokengating pop-up UI

Background

Matching the tokengating UI to your branding is an important part of connecting with your community. During the campaign creation you can edit the messaging, color scheme, and images., you can even edit these values on a live campaign.

There are two types of gates
Tokengating campaigns for exclusive discounts, and exclusive access with unlimited redemption per NFT


In the campaign creation page under the Configure Pop-up section you can edit the following values:

Campaign image URL
This will be the image when the user opens the modal before connecting their wallet

Header text
This is the text at the top of the modal
It’s recommended to keep this value short (one sentence) since there isn’t much room at the top of the modal. Longer descriptions can be used in the description section below

Description
This is the text under the hero image in the modal
This can be longer than the header text but it’s recommended to limit it to no more than two sentences

Background color
This will be the color of the text above and under the hero image in the modal

Primary Button Color
This will change the background color of the button in the pop-up

Primary Button Text Color
This will change the text color of the primary button in the pop-up

Secondary Button Text Color
This will change the outline color of the secondary button in the pop-up

Secondary Button Text Color
This will change the text color of the secondary button in the pop-up

Rejection message
This will appear if the user connects a wallet that isn't on the allow-list

Tokengating campaigns for exclusive access with limited redemption per NFT


In the campaign creation page under the Configure Pop-up section you can edit the following values:

Campaign image URL
This will be the image when the user opens the modal before connecting their wallet

Header text
This is the text under the hero image in the modal
It’s recommended to keep this value short (one sentence) since there isn’t much room at the top of the modal. Longer descriptions can be used in the description section below

Description
This is the text under the header text with a smaller font
This can be longer than the header text but it’s recommended to limit it to no more than two sentences

Background color
This is the background color of the pop-up, note that this color also fills the buttons at the bottom of the modal

Primary Button Color
This will change the background color of the button in the pop-up

Primary Button Text Color
This will change the text color of the primary button in the pop-up

Secondary Button Text Color
This will change the outline color of the secondary button in the pop-up

Secondary Button Text Color
This will change the text color of the secondary button in the pop-up

Rejection message
This will appear if the user connects a wallet that isn't on the allow-list

Updated on: 31/01/2024