How to Create Popups/Fixed Bars

Experience Creation

Create a new experience from "Create New Experience" and select "Web Customer Experience".

Set the experience name and proceed to create the experience.

Select a template or "Create Empty Popup" to enter the popup/fixed bar creation screen.

Editing Popups

The popup editor has the following features:

Position and Size

You can select the popup placement and size. When you check "Overlay", the background will be grayed out when the popup is displayed.

Background and Style

Select the background from a color code or image, and adjust the corner sharpness, shadow, and close button placement of the popup.

Click Action

You can enable Click Action and Event Measurement for elements placed within the popup.

Note: When using "Navigate to Link" or "Open LINE Official Account", please also use the following settings:

• Open in New Tab: Opens the specified URL in a new tab.

• Close Popup After Click: The popup will automatically close when this element is clicked.

Save to My Templates

You can save the edited creative as a template in the library and easily use it in other experiences.

Add/Edit Elements

You can add elements such as text, images, videos, buttons, shapes, and forms from the toolbar on the left side. Added elements can be easily edited.

Text

To add a new text element, click the text icon from the toolbar on the left.

When you select a text element, a toolbar appears, allowing you to edit, apply click actions, copy, manage layers, and delete. To edit font, line spacing, text alignment, italics, underline, strikethrough, highlight, bullet points, numbered lists, etc., click "Edit".

Image

To add a new image, click the image icon. You can add your own images. It supports uploading from local folders or via URL.

Format: jpeg, png, gif, avif, webp, ico, svg

Capacity: Maximum 6 megabytes

When you click an image element, you can change the image, edit the style (opacity, border width, corner radius, shadow), apply click actions, copy, manage layers, crop, and access other settings. From other settings, you can configure Alternative Text (Alt).

Video

You can add videos from the video icon. Use YouTube URL or iframe.

(1) YouTube URL: You can add videos using the link displayed in the browser or the share URL. (Example: https://www.youtube.com/watch?v=-_p7pkxjkiM)

(2) iframe: You can add videos using the iframe code for embedding issued by various video platforms (Example: &ltiframe&gt…&lt/iframe&gt).

About Thumbnails

When you select a video URL, you can add a thumbnail image.

For YouTube links, the thumbnail set in YouTube will be used.

About Playback Settings

You can configure whether the video will auto-play, loop, and whether the control bar will be displayed.

Button

To add a new button, click the button icon. When you click Edit, you can configure font (size, weight, color), line spacing, text alignment, italics, underline, strikethrough, highlight, and bullet points.

Shape

From Add Shape, you can add various icons to decorate popups and fixed bars.

Form

You can add up to one form to a popup or fixed bar.

Forms added from your favorite templates can be moved by drag & drop for each element, and you can freely edit the size, items, font, color of input fields, etc.

Collect as User Attributes

Content entered in form fields can be collected as user attribute data. When you collect data as user attributes, you can specify target users for experience delivery and check reports from User Groups.

To collect data as user attributes, check "Collect as User Attributes" from the item editing options.

For more details, please refer to Form Features.

Set Display/Stop Conditions

After saving the creative, let's set the timing to display/stop it. (In Advanced Edit Mode, please set the display/stop conditions for the popup from the creative editing screen.)

For details, please refer to this article.

Web Accessibility Support

All popups and fixed bars installed with Ptengine Experience support keyboard input. For more details, please refer to Web Accessibility Support.