# How to Use the Editor ## How to Use the Editor > **INFO** **Video↓↓↓** > > The order and content differ slightly from the text, but we provide content recommended for beginners. *** > **INFO** **Text↓↓↓** ## **Changing Text** ### **Text Editing** When you click on the text element you want to change, "Text Change" will appear in the toolbar. You can edit the text directly on this screen. You can change the text of copy and CTA buttons to verify conversion rates. ### **Style Editing** Click the "Style Edit" icon in the toolbar to change the following: Element size Font, font size, weight, and font color Line spacing, alignment Decorations such as underline, italics, and strikethrough Background color, border color, thickness, and padding of the selected element ## **Changing Images** ### Replacing Images #### **Basic Steps 🖼️** **Select the element** Click the image element you want to change **Toolbar display** "Change Image" option appears in the toolbar **Upload image** Upload your image file ``` Or enter the image link ``` **Replace image** The uploaded image automatically replaces the original image > **DANGER** Important Notes > > This function is applicable only to images created with img tags. > > It cannot be used for background images or images specified in CSS. **Supported image formats and limits 📁** **Supported formats**: JPEG, PNG, GIF, AVIF, WebP, ICO, SVG **Maximum file size**: 6 megabytes You can change eyecatch and banner images to verify their effectiveness. Similar to text editing, you can adjust size and padding from style editing. ### **Image Settings (Alternative Text)** When you select an image element, the "Image Settings" icon appears in the toolbar. You can set alternative text (Alt) for the selected image. For more details on alternative text, please refer to [Web Accessibility Support](/en/experience/campaign/create-new/editor-usage.md). ## Inserting and Editing Videos You can insert new videos into the page or edit existing videos. Both YouTube videos and direct-link videos (MP4/WebM, etc.) are supported. *** ### Inserting Videos 🎬 #### Basic Steps 1. **Select an element** * Click on a content element near where you want to insert the video. 2. **Click "Add Content"** * Select the insertion position (before, after, inside, etc.). 3. **Select "Video"** * Choose "Video" from the content type list in Add Content.
4. **Enter the video URL** * Enter a YouTube video link or a direct URL to a video file.
5. **Set playback options and size, then click "OK"** #### Supported Video Formats | Type | Example | | ----------------- | --------------------------------------- | | YouTube | `https://www.youtube.com/watch?v=xxxxx` | | Direct link video | MP4, WebM, etc. | {% hint style="warning" %} The video URL must start with `http://` or `https://`. Please enter a valid link address. {% endhint %} #### Playback Options In the "Playback Settings" section of the video insertion dialog, you can configure the following options: * **Autoplay**: Automatically starts playing when the page loads. * **Mute**: Turns off the video audio. Automatically enabled when autoplay is turned on. * **Loop**: Automatically replays the video after it ends. * **Hide controls**: Hides the playback controls such as the progress bar. #### Size Settings In "Display Settings", you can set the width and height of the video: * **Pixel specification**: Enter only numbers (e.g., `380`). * **Percentage specification**: Enter numbers followed by `%` (e.g., `100%`). * Click the 🔒 icon to lock the aspect ratio.
*** ### Editing Videos Inserted video elements can be re-edited from the toolbar. #### Steps 1. **Click the video element** * The "Edit Video" button will appear in the toolbar.
2. **Click "Edit Video"** * The video editing dialog opens with the current settings automatically filled in. 3. **Modify the settings and click "OK"** * You can modify the video link, playback options, and size separately. ## Adding Content and Adjusting Position ### Adding Content With content addition, you can add new content such as text, images, and videos. (Examples) Add text such as "7-day return guarantee" near the "Add to cart" button Add an image banner for links to new articles Add important CTA in the middle of the page #### **Steps to add content** Click on the content near where you want to add content. Use the layer selection feature displayed in green to select the appropriate layer. We recommend selecting the parent layer. > **WARNING** Note: There are some points to consider when adding content and adjusting styles. > > For details, please also see **"**[**Tips for adding content**](/en/experience/campaign/create-new/editor-usage.md)**"**. **Click "Add Content" and select where you want to add the content.** You can add the following 5 types of content: Heading text Body text Image Button HTML > **WARNING** There are some points to consider when adding content and adjusting styles. > > **For details, please also see "**[**Selecting the appropriate layer**](/en/experience/campaign/create-new/editor-usage.md)**".** **The added content can be edited from the toolbar in the same way.** ### **Duplicating and pasting content** If you want to add the same content as existing content, you can copy it from the "Create copy" icon in the toolbar. Then, click the "Paste" icon to paste the copied content to another location on the page. The pasted content can also be edited from the toolbar in the same way. ### Deleting content Select the content you want to delete and click the trash icon on the far right of the toolbar to delete it. ### Adjusting content position Select the content you want to move and click the following icon in the toolbar. The following popup appears. Click the destination and click the move button. Select the specific position. 💡 Depending on your site's structure, you may be able to move it successfully. For details, please refer to [here](/en/experience/campaign/create-new/editor-usage.md). ## **Editing Links** From the link icon, you can edit "Enable click action" and "Enable event measurement". Elements with no links have "Enable click action" turned OFF by default. Please slide it ON and configure the click action. If a link is already set, please edit the contents of the toolbox. The same applies to event measurement. ### **Enabling click action** This is a feature to set links to elements. You can specify the action after clicking from the action type. #### **Action type** Link transition: Navigates to the specified URL **Open LINE Official Account:** Enter the [LINE Official Account URL](/en/experience/campaign/create-new/editor-usage.md) to navigate to the page Make a call: Calls the specified phone number (Example: 03-1234-5678 \*15 character limit) Copy text or URL: Copies the specified string to the clipboard (Example: coupon code, etc.) File download: Downloads the file specified by URL **Execute code:** Executes the specified JavaScript code. If the input field is small when configuring JavaScript code, you can expand it using the arrow in the bottom right. For use cases of click actions, please also refer to related articles. ### **Enabling event measurement** When you turn ON "Enable event measurement", you can measure clicks on the target element as events. You can either add to an existing event or create a new event. #### **Steps to configure events** **Turn ON "Enable event measurement"** **Select or create a new event** If you are already measuring events in Ptengine Insight, you can select from the dropdown (Note: it will not be linked to Experience if the measurement count is less than 1). If you want to set a new event, click Create New. Events set here will be measured regardless of device. **If you want to set the created event as an evaluation metric for the experience, you can register it separately as a goal in Experience.** > **WARNING** Experience goals are aggregated on a UU (unique user) basis, while Insight events are aggregated on a session basis, so the numbers may not always match. #### **When creating new** About event name New events require an event name of your choice. If you set the same event name that is already set in Insight, the current measurement target will be added to that event. About linking to Insight Events created here can also be checked in the Insight event analysis screen. You can check the list of configured events in "Coding Events" on the event settings screen. #### About modification/deletion Even while delivering the experience, you can stop event measurement by turning OFF "Enable event measurement". If you want to delete events by name, please contact chat support with \[Request to delete events created in the experience] and provide the target event name. #### **When using existing events** If there is an action in an existing event that you want to add to the measurement, select the event name from the dropdown. Events created in Insight will be linked to Experience if the measurement count is 1 or more. If the existing event name is not displayed, please check the measurement count in the Insight event analysis screen. > **SUCCESS** Events created through this action measurement can be used not only as goals or delivery user groups for experiences, but are also linked to Ptengine Insight, allowing them to be used for numerical verification and as segment conditions. ## Preview During creative creation, use the preview feature to confirm proper display. You can preview within the editor. ## Other Features ### **Editing HTML** If you want to edit with more freedom, you can edit the source code from the "Edit HTML" icon in the toolbar or "Code mode" in the menu bar. For details, please see "[Configure experience in code mode](/en/experience/campaign/create-new/editor-usage.md)". ▼Toolbar ▼Menu bar ### **Page Edit History** All page edit history can be checked from "Edit History" in the menu bar. When clicked, the content changes and additions are displayed in a list on the left, and you can compare the differences before and after on the right. Clicking on each change history will guide you to the changed location (excluding deleted content). Also, by clicking the delete icon, you can undo that change and return to the original. ### **Screen operation mode** If you want to edit content in accordion menus (interactive content) that only display when clicked on the page, use "Screen operation mode". After switching to screen operation mode, when you click to display the content, you can "return to edit mode", so you can continue editing the page. --- # 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/create-new/editor-usage.md?ask= ``` 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.