Advanced features

CMS

CMS: Connecting a Button to a Dataset

Connect a button element to a dataset to define what happens when the button is clicked. For example, you could link a button to the "Submit" click action, a dynamic item page, or a document stored in your collection. You can also connect the button label to a collection field to show dynamic text on your button.

The list of available dataset actions varies depending on the dataset mode and whether you connect to a regular dataset or a dynamic page dataset. Learn more about all the available dataset click actions.

Connecting a button to a dataset

Once you connect a button to a dataset, you can see all the available connection types in the Click action connects to drop-down. The dataset is what binds elements on your page to your CMS collection content.

Wix Editor

Go to the relevant page in your editor.
Click the button you want to connect to the CMS. Learn how to add a button.
Click the Connect to CMS icon
.
Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
Click the Click action connects to drop-down and select the relevant option:
- Dynamic Pages: Choose the dynamic page you want to link to. Then choose how the link opens: In the current window or As a new window. Click the Rel values (SEO) drop-down to set the link attributes.
- Dataset Actions: Choose the action you want the dataset to perform when the button is clicked.
- Fields: Choose the collection field you want to connect to. You can connect to the following field types: Audio, Document, Email, Image, URL, or Video. Learn more about the field types and their content limitations.
  Tip: Select + Add to add a new field in your collection and link to it.

Screenshot of connecting a button to a dynamic item page.

(Optional) Display dynamic text in the button that changes based to the collection item it links to. Click the Label connects to drop-down and select the relevant collection field.
Tip: Alternatively, you can use static text that doesn't change by going to the button settings.

Screenshot of connecting the button label to a collection field.

Click the Accessible name connects to drop-down and select the field that best describes to screen readers what happens when the button is clicked.
(Optional) Connect 'Color' fields to your button:
1. Scroll down to Colors in the Connect Button panel on the right.
2. Click relevant tab to choose which button state you want to connect: Regular, Hover, or Disabled
3. Click the relevant drop-down menus to select the 'Color' field(s) you want to connect:
  - Text color connects to: Connect a 'Color' field to the color of the text characters.
  - Icon color connects to: Connect a 'Color' field to the button icon (if your button has an icon).
  - Border color connects to: Connect a 'Color' field to the border color.
  - Background color connects to: Connect a 'Color' field to the background color of the button.
4. Repeat this step for each button state you want to connect to a 'Color' collection field.

Screenshot of the various color connecting options for a button in the Wix Editor.

Click Preview to test your connections.
Click Publish if you are ready to make the changes go live.

Studio Editor

Go to the relevant page in your editor.
Click the button you want to connect to the CMS. Learn how to add a button.
Click the Connect to CMS icon
.
Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
Click the Click action connects to drop-down and select the relevant option:
- Dynamic Pages: Choose the dynamic page you want to link to. Then choose how the link opens: In the current window or As a new window. Click the Rel values (SEO) drop-down to set the link attributes.
- Dataset Actions: Choose the action you want the dataset to perform when the button is clicked.
- Fields: Choose the collection field you want to connect to. You can connect to the following field types: Audio, Document, Email, Image, URL, or Video. Learn more about the field types and their content limitations.
  Tip: Select + Add to add a new field in your collection and link to it.

Screenshot of connecting a button to the dynamic item page.

(Optional) Display dynamic text in the button that changes based to the collection item it links to. Click the Label connects to drop-down and select the relevant collection field.
Tip: Alternatively, you can use static text that doesn't change by clicking Change Text.
Click the Accessible name connects to drop-down and select the field that best describes to screen readers what happens when the button is clicked.
(Optional) Connect 'Color' fields to your button:
1. Scroll down to Colors in the Connect Button panel on the right.
2. Click relevant tab to choose which button state you want to connect: Regular or Hover
3. Click the relevant drop-down menus to select the 'Color' field(s) you want to connect:
  - Text color connects to: Connect a 'Color' field to the color of the text characters.
  - Border color connects to: Connect a 'Color' field to the border color.
  - Background color connects to: Connect a 'Color' field to the background color of the button.
- Repeat this step for each button state you want to connect to a 'Color' collection field.

Screenshot of the various color connecting options for a button in the Studio Editor.

Click the Preview icon
at the top right to test your connections.
Click Publish if you are ready to make the changes go live.

FAQs

Click below for answers to common questions about linking buttons in the CMS.

Can I create a dynamic link that visitors click to send emails?

Yes. You can create dynamic links that open the visitor's mail client (e.g., Outlook, Gmail) so they can send an email to the relevant address.

Option 1: Use the Email field type (Recommended):

The easiest method is to use the Email field type, which automatically validates email addresses and creates the link for you.

Add an 'Email' field to your collection.
Enter the email addresses (e.g., support@email.com).
Connect a button or image to the dataset.
Set the Click action connects to drop-down to your 'Email' field.

Option 2: Use a URL field (Alternative):

You can also use a standard URL field if you prefer to manually format the link.

Create a URL field type in your collection.
Add the email addresses with mailto: at the beginning of each address (e.g., mailto:support@email.com).
Link a button or image to a dataset and connect it to this 'URL' field.

Can I display dynamic text on my button?

Yes, you can display dynamic text on your button. After connecting a button to the dataset, click the Label connects to drop-down and select the relevant collection field. The button label will change based on the collection item it links to.

What types of content limitations should I be aware of when connecting to different field types?

Each field type (Audio, Document, Email, Image, URL, Video) has specific content limitations. Ensure your content meets these limitations to avoid any issues with the button's functionality.

You can link buttons to the following dynamic collection fields in the dataset:

Audio: Open single audio files using file types such as MP3, WAV, FLAC, and more.
Document: Open single document files such as PDFs, CSVs, and more.
Email: Opens the visitor's mail client with the email address in the 'To:' field.
Image: Open image files such as JPG, PNG, and GIF file types.
URL: Open web addresses for each item. You can add the following characters to the beginning of the URLs to modify how they open:
- mailto: Opens the visitor's mail client set to send an email to the relevant address (e.g. mailto:sales@email.com)
- sms: Opens the visitor's application used to send SMS (text) messages (e.g. sms:9254135555).
- tel: Opens the visitor's application used to call a telephone number (e.g. tel:9254135555).
Video: Open single video files using file types such as AVI, MPEG, MOV and more.

Learn more about supported field types and their limitations.

What should I use for the button’s accessible name field?

To make your site more accessible, add an accessible name to each button connected to your CMS. Accessible names work like alt text, but are designed for buttons—they help screen readers describe what the button does or where it leads.

We recommend creating a collection field for your button’s accessible name, and connecting it to the Accessible name connects to drop-down. The field should have a clear, helpful description of the button’s action or destination. For example, use “Read more about our services” or “Submit your application,” instead of a generic name like “Click here.”

You can also use expressions to create more personalized names by combining static text with data from your collection. For example, you can use CONCAT("Read more about ", title) to help screen readers provide unique descriptions for each button.

Adding accessible names improves your site’s accessibility and makes it easier for all visitors to navigate your content. Learn more about CMS accessibility best practices.

Need A Professional Website?
Contact Us Today!

I'm a paragraph. I'm connected