Custom code

Use LucentUI Editor → Advanced only when a native setting or block cannot represent the required behavior. Custom code is stored in Paymenter’s database and survives a theme file update.

Injection points

Field	Placement	Include wrapper?
Custom CSS	`<head>`	No; LucentUI adds `<style>`
Custom JavaScript	Before `</body>`	No; LucentUI adds `<script>`
Custom Head HTML	End of `<head>`	Yes, provide complete HTML
Body Top HTML	Immediately after the body shell starts	Yes, provide complete HTML
Body Bottom HTML	Before `</body>`	Yes, provide complete HTML

The Homepage and Dashboard builders also provide a Custom HTML block for page-local markup.

Safe workflow

Export settings

Download an Editor export before introducing custom code.

Add one change

Insert only one integration or customization at a time and save.

Test navigation lifecycle

Visit several pages through Livewire navigation and a hard reload. Confirm the code does not initialize twice.

Test cleanup

Remove global event listeners, intervals, observers, and third-party widgets when Alpine/Livewire replaces their owning component.

Verify security and consent

Check Content Security Policy, privacy requirements, and the third party’s data flow.

CSS example

Custom CSS should consume LucentUI tokens so it adapts to color and appearance modes:

.my-status-panel {
  color: hsl(var(--color-base));
  background: hsl(var(--color-background-secondary));
  border: 1px solid hsl(var(--color-neutral) / 0.5);
  border-radius: 0.75rem;
}

JavaScript example

Make initialization idempotent and keep a reference to cleanup work:

if (!window.myLucentFeature) {
  const onUpdate = (event) => console.log(event.detail);
  window.addEventListener('my-feature:update', onUpdate);

  window.myLucentFeature = {
    destroy() {
      window.removeEventListener('my-feature:update', onUpdate);
    },
  };
}

These fields execute trusted administrator code on customer-facing pages. Pasted code can steal sessions, alter checkout, or exfiltrate data. Never paste a snippet you have not reviewed, and restrict Editor access to trusted administrators.

Recovery from broken custom code

If the Editor is still reachable, remove the last snippet and save. Otherwise restore a known-good export or remove the corresponding lucentui_custom_* setting through a controlled database/admin recovery process. Clear caches afterward:

php artisan optimize:clear

About Zaqua

LucentUI

Sonata

Injection points

Safe workflow

CSS example

JavaScript example

Recovery from broken custom code

​Injection points

​Safe workflow

​CSS example

​JavaScript example

​Recovery from broken custom code

Injection points

Safe workflow

CSS example

JavaScript example

Recovery from broken custom code