Features & Functionality

How do I add custom code to my Wix website?

Adding custom code to a Wix website is done primarily through Wix Studio using Velo by Wix, which lets you embed HTML, CSS, and JavaScript directly into your site.

Adding Custom HTML or Third-Party Code

Use this method to embed widgets like Google Maps, forms, chat widgets, or any third-party script.

  1. Open your site in Wix Studio
  2. Navigate to the page where you want to add the code
  3. Click the Add Elements (+) button in the top-left
  4. Choose Embed & Social
  5. Select Embed Code and drag it onto your page
  6. In the popup, paste your HTML/JavaScript code
  7. Adjust the size and position as needed
  8. Click Update and then Publish your site

Adding Custom CSS for Styling

Use custom CSS to change fonts, colors, spacing, or create custom designs.

  1. In Wix Studio, go to the Design panel
  2. Click on Global CSS or Custom CSS
  3. Add your CSS rules to style your elements
  4. Apply the class to buttons or text elements in the editor
  5. Save and publish

Adding Custom JavaScript for Interactive Features

Use Velo by Wix to add dynamic behavior such as form validation, API calls, or animations.

  1. In Wix Studio, click the Dev Mode toggle (bottom-left) to enable Velo
  2. In the Developer Tools panel, write frontend or backend JavaScript code
  3. Use the code editor to add event handlers, API integrations, and custom logic
  4. Use the Secrets Manager to store API keys securely when calling external APIs
  5. Publish your site

Creating Reusable Custom Widgets

For more advanced customization, you can build custom elements or widgets using Wix Blocks, Wix's low-code tool for developers. This allows you to create responsive, reusable components with HTML, CSS, and Velo code that can be embedded across Wix sites.

Best Practices

Security: Only embed code from trusted sources and never expose API keys in frontend code.

Performance: Avoid heavy scripts that slow down your site. Use async or defer attributes for external scripts.

Mobile Responsiveness: Always test how your custom code looks on mobile devices.

Backups: Before adding complex code, duplicate your page or site as a backup.

For detailed guidance on custom code integration, you can explore Wix Studio features and the Velo by Wix documentation to learn more about the development capabilities available.