Tutorials Overview

Step-by-step tutorials for building functionality into your Wix site. Each tutorial covers a complete implementation from setup to testing.

Bookings

Block Off Time in the Bookings Calendar

Build an interface that allows Wix users to programmatically manage staff availability by blocking time slots in Bookings calendars. Learn to handle single time slots and recurring blocked time patterns for scenarios like staff vacation, equipment maintenance, or training sessions.

Create a Custom Bookings Experience for Appointment Services

Create a complete custom booking flow for appointment-based services that integrates with Wix eCommerce for payment processing. Learn to display available services, check slot availability, handle bookings, and manage the entire customer booking experience.

Data

Add Data Search and Filtering Functionality

Transform static content displays into interactive experiences by adding real-time text search and dropdown filtering to your site. Learn to query collections, handle user input, and dynamically display matching results as visitors type or select filters.

Add Navigation to a Dynamic Page

Learn to implement navigation between dynamic pages, allowing site visitors to move seamlessly through your content. Master the techniques for linking dynamic items and creating intuitive browsing experiences.

Create Dynamic Pages with Custom Router

Build a custom router to create and manage dynamic pages with full control over how incoming requests are handled. Learn to set up router code, create index and item pages, and implement sitemaps for SEO using a real estate property listing example.

Display Database Collection Content in a Repeater

Query a database collection and display the results in a repeater element. Learn the fundamentals of connecting your data to the frontend and creating dynamic, data-driven layouts.

Integrations

Call APIs with Secrets

Learn to securely call external APIs using API keys stored in the Secrets Manager. Build a working web method that retrieves weather data from OpenWeatherMap while keeping sensitive information safe and confidential.

Call External APIs with Fetch

Use the fetch API to connect to external services and display retrieved data on your site. Learn to make HTTP requests, handle responses, and display collections of data using repeater elements.

Members & Contacts

Create a Custom Registration Form

Build a fully customized registration form that matches your site's branding and collects specific information during the signup process. Learn to validate confirmation fields and integrate with Wix's Members Area functionality.

Send a Triggered Email to Members

Create and send personalized triggered emails to site members based on specific actions or events. Learn to set up email templates, trigger sending based on user behavior, and communicate effectively with your members.

Send Emails with the SendGrid npm Package

Integrate the SendGrid npm package to send custom emails from your Wix site. Learn to configure SendGrid, work with npm packages in Wix, and implement professional email functionality.

Monitoring

Generate Logs to Debug a Site

Learn to generate and view logs from your site code using Wix Logs. Master essential debugging techniques that help you track code execution and troubleshoot issues in both page and backend code.

Send Tracking and Analytics Events

Implement tracking and analytics events to monitor user behavior and site performance. Learn to capture meaningful data about how visitors interact with your site and use it to make informed decisions.

User Interface

Create a One-Time Popup

Build a popup that appears only on a visitor's first page load during a browser session. Learn to use popups and the Storage API to create user-friendly announcements, special offers, or welcome messages without repeatedly showing them.

Customize a Wix Form

Extend the functionality of Wix Forms by displaying custom thank you messages using user input from form submissions. Learn to work with form events and create personalized user experiences.

Display Elements in Mobile Only

Control element visibility based on device type to create optimized experiences for mobile users. Learn to detect device types and show or hide content appropriately for different screen sizes.

Hide a Video Player When There's No Video

Create a cleaner user experience by conditionally hiding video player elements when no video is available. Learn to check for video content and dynamically control element visibility.

Use the Upload Button with Code

Implement file upload functionality using the upload button element. Learn to handle file uploads, process uploaded files, and create interactive file management features.

Work with Multi-State Boxes

Learn to set up multi-state boxes that display different content based on specific conditions or user interactions. Master state management techniques for creating dynamic interfaces like toggles, multi-step forms, and status-based displays.

Did this help?