10.1 Custom Code

The AIUNIFY Leads website Add/Edit interface includes a Custom Code tab for adding website-specific Custom CSS and Custom JavaScript.

This functionality is intended for users who need design or behavioral adjustments beyond the standard no-code website configuration.

10.2 Custom Code Warning

The Custom Code tab includes a warning message before the code-entry fields. This is important because incorrect CSS or JavaScript can change the appearance or behavior of the website.

Use custom code carefully. A syntax error, overly broad CSS selector, or conflicting JavaScript routine can affect website presentation or functionality.

10.3 Custom CSS Field

The Custom CSS field is a multiline code area intended for website-specific cascading style sheet rules.

The interface displays the field as an eight-row monospace textarea to make code easier to read and edit.

Common Reasons to Use Custom CSS

1. Adjust spacing that cannot be achieved through normal section controls.
2. Modify typography for a specific website element.
3. Add custom responsive behavior.
4. Apply specialized styling to a known class or element.

10.4 Custom JavaScript Field

The Custom JavaScript field is a multiline code area for website-specific JavaScript.

Like Custom CSS, the interface presents the field as an eight-row monospace textarea.

Common Reasons to Use Custom JavaScript

1. Add specialized front-end interactions.
2. Respond to supported browser-side events.
3. Integrate website behavior that is not provided through the standard builder controls.

10.5 Saving Custom Code

Custom CSS and Custom JavaScript are part of the website record.

1. Open Websites.
2. Open the website Add/Edit interface.
3. Open the Custom Code tab.
4. Enter or revise the Custom CSS or Custom JavaScript.
5. Select Create for a new website or Update for an existing website.
6. Preview the website and verify the change.

The form also provides a Cancel action if you do not want to save the current changes.

10.6 CSS Best Practices

1. Make one small change at a time.
2. Use specific selectors instead of broad selectors whenever possible.
3. Avoid overriding every element of a common HTML type unless that is intentional.
4. Check the website on desktop and mobile after making responsive changes.
5. Keep a copy of substantial custom code before replacing it.

10.7 JavaScript Best Practices

1. Use valid JavaScript syntax.
2. Avoid redefining global functions unless you understand the impact.
3. Do not remove or disable required navigation, forms, language controls, or builder-generated functionality.
4. Test changes in the public preview before distributing the website URL.
5. Remove the most recent custom change first when troubleshooting a problem introduced immediately after editing code.

10.8 Troubleshooting Custom Code

If the website begins displaying incorrectly after a Custom CSS change:

1. Return to the Custom Code tab.
2. Review the most recently added CSS.
3. Remove or correct the suspected rule.
4. Update the website.
5. Reload the public website and test again.

If website interactions stop functioning after a JavaScript change, use the same process with the most recent JavaScript modification.

10.9 When to Use Website Builder Instead

Custom code should not be the first choice when the same result can be achieved through AIUNIFY Leads' normal Website Builder, section layouts, theme colors, website settings, or supported component controls.

Using native controls generally makes future maintenance easier for other authorized users.

10.10 Operational Rule

Use the no-code controls first. Use Custom CSS or Custom JavaScript only for requirements that need additional code-level customization, and always preview the website after saving.