How to Use Code Mode

How to Use Code Mode

The Ptengine Experience code mode is a feature that allows you to provide users with more flexible and advanced experiences by leveraging HTML, JavaScript, and CSS. By using this mode, you can implement complex features and custom designs that would be difficult to achieve with standard tools.

Code Mode Editing Locations

"Code Mode" in the Page Editing Editor

Clicking the button expands the code mode settings screen.

In this screen, you can edit JavaScript and CSS in separate input fields.

DANGER JavaScript Input Notes

When writing JavaScript, you do not need the tag.

❌ Incorrect example:

JavaScript
<script>
function myFunction() {
  console.log("Hello, World!");
}
</script>

✅ Correct example:

JavaScript
function myFunction() {
  console.log("Hello, World!");
}

"Edit HTML" Item in the Menu Bar

When you click an element on the page, the menu bar appears.

You can also use "Edit HTML" in the menu to edit the corresponding element in code mode.

DANGER Warning:

When writing JavaScript with this feature, the tag is required, so don't forget to add it.

✅ Correct example:HTML<div id="my-element"> Original content <script> document.getElementById('my-element').addEventListener('click', function() { alert('Clicked!'); }); </script></div>❌ Incorrect example (without script tag):HTML<div id="my-element"> Original content document.getElementById('my-element').addEventListener('click', function() { alert('Clicked!'); });</div>

Important Notes When Using Code Mode ⚠️1. Third-Party Library Usage Restrictions 🚫Reasons:Experience functionality degradationLoading speed degradationRecommendations:Use pure JavaScript as much as possibleImplement with minimal code2. Page Element Change Timing ⏱️Problem:JavaScript element changes are executed after the page finishes loadingDepending on the campaign loading timing, changes may be applied after elements are displayedRisks:Changing elements in the first view may degrade user experienceRecommendations:Do not change elements in the first view with JavaScriptMake changes to elements at the bottom of the page or with lazy loading as much as possible