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. The same dashboard page is available on Studio Two, Wix Studio, and Wix Editor sites. 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.

On Studio Two you can also add an embedded script as part of the site project. Dashboard custom code and an embedded script both inject a fragment into the page. Use dashboard custom code for a snippet you paste in, and an embedded script when the fragment should live in the site's code.

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: Google Search Console, Pinterest, Bing Webmaster Tools, Yandex Webmaster, and Naver Webmaster Tools each have a field for a verification meta tag in the site dashboard, under Settings > SEO & GEO > Site Verification. For a search engine that isn't listed there, paste the <meta> tag into the <head> with custom code. Learn more about verifying a site with a search engine.
• 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, 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 site code. On Studio Two, call backend logic through HTTP endpoints. On Wix Studio and Wix Editor, use the Wix JavaScript SDK.

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 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
Where you add it	Site dashboard, under Settings > Custom Code	The site's code editor. Studio Two uses the Code tab. Wix Studio and Wix Editor use the built-in code editor, the Wix IDE, or a 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

Dashboard custom code is available on Studio Two, Wix Studio, Wix Editor, and Wix Harmony sites. Harmony sites have no site code, so custom code is one of the main ways to extend them. For functionality that needs Wix APIs or backend logic, use site code in Studio Two, Wix Studio, or Wix Editor.

See also

• Embedding Custom Code on a Site
• Embedded Scripts: The project-based way to inject a fragment on Studio Two.
• Types of Wix Sites
• About Frontend Security