# Specifying Popup Display with Javascript

In campaign settings, you can display popups at the appropriate timing in accordance with user actions on your site. Among these options, there is a method to control the timing of popups and fixed bars even more freely using Javascript code. We will explain this in detail below.

> **INFO** **Note:** Control via Javascript code applies only to popups and fixed bars, and does not apply to site editing. Additionally, you can trigger it multiple times within one session.

## Configuration Method

As shown in the attached image, after creating the creative, select display by Javascript code in the settings of "Display/Stop Conditions".

You can control the firing of popups or fixed bars using Javascript code like the following: `ptengine && ptengine.showEngagement('xxxxxxxx');`

**Note:**

* The ID code differs for each creative, device, and pattern, so always obtain the correct one.
* When performing A/B tests, you need to implement all the codes for each pattern.
* When setting up campaigns on both PC and SP (smartphone) devices, you need to implement all the codes for each device.

Copy the Javascript code, implement it on the page where you want to display it, and trigger it at the timing you want to display.

Complete the campaign settings and save.

## Implementation Examples

When adding to HTML `<button id="loginBtn" onclick="ptengine && ptengine.showEngagement('xxxxxxxx')">login</button>`

When adding to native Javascript `document.getElementById("loginBtn").addEventListener("click", function(){ ptengine && ptengine.showEngagement('xxxxxxxx) });`


---

# 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/faq/experience-edit/javascript-popup.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.