Learn how to build a comments section on a Wix site using Velo. Create a database collection, add input fields and a repeater to display comments, then write code to refresh the list after each submission so new comments appear instantly.
Chapters
Today I'll show you how to collect and display user generated content on your site. Before we begin, make sure code is enabled. First, create a database collection to store and manage the content you want to collect from your visitors. From the Site Structure sidebar on the left, hover over Database. Click the plus sign here and then New Collection. Name your collection comments and set the permissions to form submission. Then click Create Collection. Next, click plus here to add fields for the information you want to collect. Give each of your items a field name like Comments. Once your database is set up, go to the Site Structure sidebar and click on the page you want your visitors comments to appear on. Then go to Add User Input and drag and drop user input elements to collect information from your visitors. Like their name. For this example, add an additional element for visitors to write and submit their comments. When you're done, add a Submit button. Click Add button and customize it. Finally, go to Add Text and create a title to display visitor comments. Add a repeating layout. Click Add, select Lists and Grids and choose the repeater you want. This type of layout lets you present unlimited content from your database on a single site page. Next, change the ID of your repeater. Select it, and in the Properties panel, rename your ID to Comments list. You'll use this new ID later in your code. Now you're good to go. Add a dataset to your page. Click Add Database and select Dataset. Connect this dataset to the Comments database. Change the dataset name to Comments Write. Set the mode to Write Only and change its ID to Comments Write. This dataset will allow visitors to write data into the Comments database. Click Connect to Data to link your user input elements to the fields in your database. Next, add and connect an additional data set to the Comments database and rename it. This time, leave the mode as Read Only and change its ID to Comments Read. This dataset will be used to display the information you collected from your visitors on the page. Again, click Connect to Data to link the repeater and its elements to this database. In order for visitors comments to appear on your page instantly after submission, you'll need to add some code. To add your own code, open the code panel at the bottom of the WIX editor. Import the WIX data library so you can query data from the Comments database. Next, add a getdata function to get the information from the Comments database. Then use the After Save event with the Comments Right dataset. This will call your function every time a user submits a comment and posts it live on your site. Click preview to test it out. Now you're ready. This video is always here, so come back and watch it again. For more help, you can also visit our resource page for tutorials, articles, example code and more.
