In This Article

About Custom Code

Custom code lets you add HTML, JavaScript, and CSS snippets to the head or body of a site's pages. You can use it to integrate external services, customize site behavior, and add functionality that isn't available through the editor's built-in tools.

You add custom code from the site dashboard under Settings > Custom Code. Custom code can be used in all Wix editors. For Wix Harmony sites, which don't support site code, custom code is one of the primary ways to extend a site's functionality beyond what the editor provides.

Note: To add custom code, the site must be published and have a connected domain.

How it works

When you add a custom code snippet, you configure the following:

Placement: Where the snippet is injected in the page's HTML. Options include the <head> tag, the start of the <body> tag, or the end of the <body> tag.
Scope: Whether the snippet loads on all pages or only on specific pages.
Loading behavior: Whether the snippet loads once per visit or on every page the visitor opens.

Custom code snippets don't appear as elements in the editor. They run behind the scenes when the page loads, but their effects, such as applied styles, injected UI elements, or data fetched from external services, are visible to site visitors on the published site.

Use cases

You can use custom code to integrate 3rd-party services, style elements beyond what the editor offers, add interactive JavaScript, and improve SEO with structured data.

Integrate 3rd-party services

Many external services require a code snippet to be added to a website. Custom code gives you a place to paste these snippets so they load alongside the site. Common examples include:

Site verification: Search engines like Google and Bing require a <meta> tag in the site's <head> to verify site ownership.
Live chat widgets: Customer support platforms provide a script that displays a chat widget on the site.
Cookie consent banners: Privacy compliance tools provide a snippet that displays a consent banner to meet GDPR or CCPA requirements.

Add custom CSS

You can inject a <style> tag in the site's <head> to apply CSS rules that aren't available through the editor. For example:

Loading a custom font from Google Fonts or another font service using a <link> tag.
Overriding spacing, colors, or typography by targeting standard HTML tags like h1, p, and a in the rendered page.
Styling browser UI components like scrollbars using CSS pseudo-elements such as ::-webkit-scrollbar.

Add custom JavaScript

You can inject a <script> tag to run JavaScript on the page. This can be useful for:

Fetching and displaying data from an external API, such as live pricing, weather, or social media feeds.
Adding interactive elements that don't depend on Wix page elements, such as countdown timers, calculators, or notification banners.

Enhance SEO with structured data

You can add JSON-LD scripts to the site's <head> to provide structured data that search engines use to display rich results. For example:

LocalBusiness schema so a business name, address, and hours appear in search results.
FAQPage schema so FAQ content displays as expandable answers in search results.
Event schema so upcoming events appear with dates and locations in search listings.

Limitations and caveats

Custom code operates outside the Wix-managed environment. It can extend what a site does, but there are important constraints to be aware of.

No access to Wix APIs: Custom code can't interact with Wix page elements ($w selectors), data collections, backend methods, or business solutions like Stores, Bookings, or Pricing Plans. It can only work with the raw HTML DOM and external resources.
No stable selectors: Wix generates class names and element IDs dynamically. CSS rules or JavaScript that target these identifiers may break when a site is re-published or updated. More advanced CSS effects, like scroll-snap behavior on Wix container elements, are technically achievable but may produce unstable results.
No guaranteed DOM compatibility: The Wix rendering engine manages the page layout and may re-render elements in ways that conflict with direct DOM manipulation, especially during page transitions or viewport changes.
No editor integration: Changes made through custom code aren't visible in the site editor. Other collaborators may not be aware of injected code, which can lead to maintenance issues.
No backend execution: All custom code runs in the browser. For tasks that require backend logic, such as secure API calls, data processing, or scheduled jobs, use the Wix JavaScript SDK on a Wix Editor or Wix Studio site.

Caution: Custom code is injected directly into the page's HTML and is visible to anyone who views the page source or uses browser developer tools. Don't include API keys, passwords, or other sensitive data in custom code snippets. If your integration requires a secret key, use backend code or a proxy server instead.

Important: Tracking scripts for Google Analytics, Google Tag Manager, and Facebook & TikTok pixels don't work through custom code. Connect these to a site using marketing integrations instead.

Verify your custom code

Custom code doesn't take effect in the editor and only runs on the published site. To confirm that a snippet is working, use your browser's developer tools to check the page source, inspect applied styles, view console output, or validate structured data. For example, you can use Google's Rich Results Test to check that JSON-LD markup is detected and valid.

Custom code compared to site code

Custom code and site code (Wix JavaScript SDK) serve different purposes:

	Custom code	Site code
Purpose	Inject standalone code snippets	Build integrated site functionality
Access to Wix APIs	None	Full access to Wix APIs, elements, and data
Wix Harmony support	Yes	No
Where to access	Site dashboard	Code editor, Wix IDE, or local IDE
Runs on	Browser only	Browser and backend
Typical use	3rd-party integrations, custom CSS, SEO markup	Event handlers, data queries, UI logic, backend code

For sites built with Wix Harmony, custom code provides a way to integrate external services and apply limited customizations. For advanced functionality that requires access to Wix APIs or backend logic, consider building the site with the Wix Editor or Wix Studio instead.