# 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.
>
> ```javascript
> ❌ 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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/en/experience/campaign/code-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.