PT Mitra Kasih Perkasa — Developer-Free Content Editing Handbook

Everything needed to maintain mitrakasihperkasa.com without prior WordPress or coding knowledge: how to log in, how to edit the header/footer/images, how the site's custom code blocks work, and a worked, step-by-step guide to every one of the 59 editable content blocks across all 15 pages.
Stack: WordPress 7.0.1 + Elementor Pro 4.1 (Atomic/new editor) + VamTam "Finovate" theme + Polylang (multilingual) + Elementor Theme Builder (header/footer)
Admin URL: mitrakasihperkasa.com/wp-admin/
You do NOT need to know WordPress or Elementor to use this document — Section 1 explains the vocabulary, Sections 2–5 are step-by-step recipes for the basics, and Section 8 is a ready-made walkthrough for every custom content block on the site.
Contents
  1. Orientation — the vocabulary and mental model you need
  2. How to log in and find your way around
  3. How to edit the Header
  4. How to edit the Footer
  5. How to upload / replace an image or video
  6. Understanding the site's custom HTML/CSS/JS blocks (what they are, two worked examples, editing with an AI assistant)
  7. Common section patterns (read once, applies across most pages)
  8. Page-by-page worked examples — every block on every page, with real code and steps
  9. Safe-editing checklist

1. Orientation — Vocabulary and Mental Model

This site is not a hand-coded HTML site. It is a WordPress site, and almost every visual element is assembled with a page-builder plugin called Elementor. Before touching anything, it helps to understand four concepts:

WordPress (wp-admin)
The content management backend. Everything — pages, images, plugins, users — is managed by logging into /wp-admin/.
Elementor
A drag-and-drop page-builder plugin. Instead of writing HTML files, content editors build pages visually inside a WordPress edit screen. Elementor stores its own data (layout, styles) inside the WordPress database, but it also renders standard HTML/CSS/JS to the browser like any website.
Container / Widget
A Container is roughly equivalent to a <div> or <section> — a layout box that holds other things. A Widget is a single component inside a container — a Heading, an Image, a Button, or (importantly for this handbook) an HTML widget, which is a raw code box where someone has hand-written HTML/CSS/JS instead of using Elementor's visual controls.
Structure panel (a.k.a. Navigator)
Inside the Elementor editor, this is a collapsible tree view of every Container and Widget on the page — similar to a sitemap or a layers panel in Photoshop/Figma. This is your main tool for finding things on long pages.
Bottom line: most content (text, images, buttons) can be edited visually with clicks — no coding required. But this site also contains genuine hand-written code blocks (the "HTML" widgets), and those DO require reading/writing HTML, CSS, and JavaScript directly. Section 6 explains those, and Section 8 walks through every single one found on the site.

2. How to Log In and Find Your Way Around

  1. Go to https://mitrakasihperkasa.com/wp-admin/ and log in with the account provided to you.
  2. On the left sidebar, the two menus you'll use constantly are Pages (all the site's pages) and Templates (Elementor's Theme Builder, where the Header and Footer live).
  3. To edit any page's content: go to Pages, hover over the page title, and click Edit with Elementor. A plain "Edit" link also exists but opens WordPress's basic editor — always use Edit with Elementor instead, since that's how this entire site is built.
  4. Inside the Elementor editor, click the Structure icon in the bottom toolbar to open the Navigator tree — this is how you'll locate specific sections referenced later in this document.
Heads up: the editor can sometimes show a "Session expired" notice partway through editing. If you see this, click "Please log in again," log back in in the new tab, close it, and return to your original tab — your edits up to that point are generally preserved as drafts, but publish/save often to be safe.

3. How to Edit the Header

The header is not part of any individual page — it's a single shared template applied site-wide via Elementor's Theme Builder, so editing it once updates it everywhere.

Where to find it

  1. In the WordPress sidebar, go to Templates (Elementor's Theme Builder menu).
  2. Click Header in the template-type list.
  3. You'll see a template called "Header – Mitra Kasih Perkasa" marked as applied to "Entire site" — this is the live one. (A second, unused header called "Header – Consulting Company" also exists; ignore it.)
  4. Click Edit with Elementor on the live header.

What's inside it

The header is built entirely from standard Elementor widgets — no custom HTML/CSS/JS code is used here, which makes it relatively safe to edit. It's split into two independent versions that you edit separately:

How to make common changes

TaskHow
Replace the logoClick the Site Logo widget → click the image thumbnail in the left panel → upload/select a new image in the Media Library
Add/remove/reorder a menu itemDon't edit this inside Elementor. Go to WordPress sidebar → Appearance → Menus (this controls what the "WordPress Menu" widget displays)
Change the CTA button text/linkClick the Button widget in the header → edit its Text and Link fields in the left panel
Change header colors/spacingClick the Container → use the Style tab in the left panel
Important distinction: the navigation links themselves (Home, About Us, Travel Tech, etc.) live in a WordPress Menu, not directly inside the Elementor header widget. To change link text, URLs, or add/remove pages from the nav, go to Appearance → Menus in wp-admin, not the Elementor header editor.

4. How to Edit the Footer

Where to find it

  1. WordPress sidebar → Templates → Footer.
  2. Open "Footer – Mitra Kasih Perkasa" (applied to "Entire site" — the live one; ignore "Footer – Consulting Company").
  3. Click Edit with Elementor.

What's inside it

Like the header, the footer uses only standard Elementor widgets — no custom code. Its structure (top to bottom) is: a Container holding the company logo Image; a series of Icon + Text Editor widget pairs (these render the contact details — address, phone, email — each icon paired with its text line); more Containers holding certification/award logo Images; and a Social Icons widget for social media links.

How to make common changes

TaskHow
Update an address/phone/email lineClick directly on the Text Editor widget next to the relevant Icon and edit the text
Replace the footer logo or a certification badgeClick the Image widget → click the thumbnail → choose/upload a new image
Update social media linksClick the Social Icons widget → edit each platform's URL in the left panel
Add a new certification logoDuplicate an existing Image widget in that row (right-click → Duplicate) rather than building one from scratch, so spacing matches

5. How to Upload or Replace an Image / Video

Method A — from inside Elementor (most common)

  1. Open the relevant page with Edit with Elementor.
  2. Click directly on the image or video you want to change on the canvas.
  3. The left panel opens that widget's settings on the Content tab. For an Image widget, click the image thumbnail; for a Video widget, you'll see fields for the video source.
  4. A Media Library popup opens. You can either select an existing file, or click Upload Files and drag your new file in.
  5. After uploading, always fill in the Alt Text field (for images) — this matters for accessibility and SEO.
  6. Click Insert Media (or "Select") to apply it, then Update/Publish the page.

Method B — uploading in bulk beforehand

WordPress sidebar → Media → Add New. You can upload many files here first, then go select them from the Media Library when editing a widget, instead of uploading one at a time inside Elementor.

Video specifics

Elementor's Video widget supports three source types: a hosted YouTube or Vimeo URL (just paste the link — no file upload needed), or a Self Hosted file uploaded through the Media Library like an image. Self-hosted video files are much larger than images, so prefer YouTube/Vimeo embeds for anything long, and only self-host short, compressed background clips.

Image size and optimization notes

6. Understanding the Site's Custom HTML/CSS/JS Blocks

Beyond the standard Elementor widgets described above, most pages on this site also contain one or more widgets literally named "HTML" in Elementor's Structure panel. This is Elementor's raw-code widget: instead of visual controls, it's a plain code box where a developer has hand-written HTML markup, and typically embedded <style> tags for custom CSS and <script> tags for custom JavaScript directly inline. These are used for effects that Elementor's built-in widgets can't produce out of the box — things like animated number counters, custom card layouts, marquee/scrolling logo strips, and interactive hover effects.

This is the part of the site that genuinely requires coding knowledge. You cannot change what's inside an HTML widget by clicking around visually — you have to open it and edit the HTML/CSS/JS source directly, the same as editing any hand-written web page. Section 8 below has a ready-made, plain-English walkthrough for every single one of these blocks on the site, so in most cases you won't need to figure this out from scratch.

How to open and edit one on the live site

  1. Open the relevant page with Edit with Elementor.
  2. Open the Structure panel (bottom toolbar) to see the full element tree.
  3. Look for entries labeled "HTML" — click one to select it on the canvas. They appear in the same top-to-bottom order as the numbered blocks in Section 8.
  4. The left panel will show a code editor field containing the raw HTML for that block. Scroll inside it to find and edit the relevant markup, inline <style> rules, or <script> logic.
  5. Click Preview Changes to test before publishing — these blocks can be sensitive to small syntax errors (a missing closing tag or bracket can break the whole block's layout or animation).
  6. Use the History → Revisions panel to roll back if something breaks.
Tip: Elementor's Structure panel has an "Expand all elements" button — use it on longer pages to make sure you're not missing HTML widgets nested inside collapsed sections. You may also see Containers with developer-assigned names like "statistic", "card", "count" (these usually travel together and power animated number counters), "testi" (testimonial carousels), and "trusted by 200" (partner logo strips) — recognizing these will help you navigate faster without opening every widget.

The CONFIG object — where the actual content lives

Almost every HTML widget on this site follows the same internal pattern: near the top of the <script> tag there is a single JavaScript object or list (usually named CONFIG, or something like MKP_WHATWEDO_CONFIG / MKP_HERO_CONFIG / SLIDES) that holds every piece of editable content — headline text, stats, links, testimonials, and image/video paths. The code below that object just loops over it to build the HTML; you should almost never need to touch that part.

Some (not all) blocks leave visual markers in the code to show you exactly where it's safe to edit — a comment near the top of the <script> like ✏️ EDIT CONTENT HERE, down to one like 🚫 DO NOT EDIT BELOW THIS LINE. Everything between those two markers is the object you're allowed to edit; everything below the second marker is "wiring" code — leave it alone. If a block doesn't have these comments, treat the first object declared in the <script> (the one with plain-English field names like name, title, imgSrc, videoUrl) as the content.

Worked example 1 — adding a new client logo (Home hero)

The Home page's hero has a clientLogos array inside its CONFIG object:

clientLogos: [
    { name: "Bank Mandiri", href: "/clients/bank-mandiri", imgSrc: "/wp-content/uploads/2026/03/bank_mandiri-scaled.webp" },
    { name: "BRI", href: "/clients/bri", imgSrc: "/wp-content/uploads/2026/03/bank_bri.webp" },
    ...
]

To add a new logo to this marquee strip:

  1. Upload the logo image via Media → Add New in wp-admin (see Section 5, Method B).
  2. Open the uploaded file in the Media Library and copy its File URL — it will look like https://mitrakasihperkasa.com/wp-content/uploads/2026/07/new-client-logo.webp.
  3. Strip the domain, keeping only the path from /wp-content/ onward: /wp-content/uploads/2026/07/new-client-logo.webp. This relative form is what every existing entry uses.
  4. Add a new { name, href, imgSrc } object to the array, comma-separated like the others. name doubles as the image's alt text; href is where the logo links to (use "#" if there's no target page yet).
  5. Click Preview Changes, confirm the new logo appears in the scrolling strip, then Update/Publish.

Worked example 2 — adding a new video testimonial (Home page)

Further down the Home page, a testimonials/video-carousel widget has a partners array, clearly fenced with the edit markers described above:

/* ✏️ EDIT CONTENT HERE */
var partners = [
  {
    name: "I Putu Suardhana S.E., M.M",
    role: "Direktur Utama Perumda Pasar Argha Nayottama",
    avatar: "",
    testimony: "Transparansi dan akuntabilitas dapat dikelola secara lebih efektif...",
    videoThumb: "/wp-content/uploads/2026/02/mkp_vid_thumbnail_putu_suardhana.webp",
    videoUrl: "/wp-content/uploads/2026/02/mkp_vid_Argha-Nayottama.mp4"
  },
  ...
];
/* 🚫 DO NOT EDIT BELOW THIS LINE */

To add a new testimonial: upload both a thumbnail image and the video file via Media → Add New, copy each File URL, strip the domain from each (same recipe as Example 1), then add a new object to the array with name, role, testimony (the quote text), videoThumb, and videoUrl. Leave avatar as "" — the widget automatically generates a colored initials badge when it's empty.

Don't know how to code? Let an AI assistant do the editing for you

You don't need to understand JavaScript to make these edits — you can hand the whole widget's code to an AI chat tool (ChatGPT, Claude, Gemini, etc.) along with a plain-English description of what you want changed, and paste back whatever it gives you. This works well because the edits above are almost always "add one more item to a list" or "change this one line of text" — exactly the kind of mechanical task AI tools are reliable at, as long as you give them the full code and a narrow instruction.

Step-by-step

  1. If your change involves an image or video, upload it first via Media → Add New and copy its File URL (see Section 5). You still have to do this part yourself — the AI can't upload files to your WordPress for you.
  2. Open the page with Edit with Elementor, click the HTML widget you need to change, and inside its code editor field select everything (click inside the field, then Ctrl+A / Cmd+A) and copy it (Ctrl+C / Cmd+C).
  3. Open ChatGPT, Claude, or Gemini in a browser tab and paste in the prompt template below, filling in the two bracketed parts.
  4. Send it. The AI will reply with the complete edited code.
  5. Copy the AI's entire reply, go back to the Elementor code editor field, select all the existing code and delete it, then paste in the AI's version so it fully replaces what was there.
  6. Click Preview Changes and check it actually looks right before publishing. If it looks broken, don't publish — roll back with History → Revisions instead.

Prompt template — copy this whole box, fill in the brackets, and send it to the AI

I'm going to paste the code for one widget from my WordPress website (built with Elementor's HTML widget). I need ONE specific change made to it.

Rules for you:
- Give me back the COMPLETE code with that one change applied — every line, from the very first line to the very last, not just the changed part.
- Do not shorten, "clean up," reformat, or improve anything else. Do not rename any CSS class or id. Only make the exact change I describe below.
- If the code has a comment marking where content should be edited (e.g. "EDIT CONTENT HERE" or "DO NOT EDIT BELOW THIS LINE"), only touch the section meant to be edited.
- Don't explain the change, just give me the full code back so I can paste it directly back into my editor.

The change I want: [DESCRIBE IN PLAIN ENGLISH — e.g. "Add a new client logo named 'Bank XYZ' linking to /clients/bank-xyz using image path /wp-content/uploads/2026/07/bank-xyz.webp, added after the BCA entry, following the same format as the other entries."]

Here is the code:
[PASTE THE FULL WIDGET CODE YOU COPIED FROM ELEMENTOR HERE]
More example requests you can drop into the bracket:
  • "Change the headline text 'Reliable' to 'Trusted', keep everything else exactly the same."
  • "Add a new certification badge named 'ISO 27001' using image path /wp-content/uploads/2026/07/iso-27001.png, added after the existing URS/UKAS entry."
  • "Update the phone number in this block from +62 21 1234 5678 to +62 21 8765 4321."
Before you trust the AI's output:
  • Always paste the AI's code into Preview Changes first — never straight to Publish.
  • If the AI's reply looks dramatically longer, shorter, or differently structured than what you pasted in, be suspicious — it may have "helpfully" rewritten more than you asked. Don't paste it in; instead reply to the AI with "that changed more than I asked — please only make the exact change I described, keeping everything else identical to my original," and try again.
  • Always follow the Safe-Editing Checklist in Section 9 first: copy/save the original code somewhere before you touch anything, so you can paste it straight back if the AI's version breaks the page.

7. Common Section Patterns

Most of the 59 content blocks catalogued in Section 8 are one of a small number of recurring component types. Recognizing the pattern (shown as a badge next to each block) tells you what kind of edit you're making before you even open the file.

Hero banner Hero banner

Full-width hero banner (headline, subtext, CTA button, and a handful of floating stat/value chips). Usually the very first section on a page.

Sticky-scroll carousel Sticky-scroll carousel

Sticky-scroll feature carousel — as you scroll, the page “parks” and an image card advances through a small list of slides while the text beside it changes. Built with the Swiper library. This exact component (usually a SLIDES array) is reused across several pages.

FAQ accordion FAQ accordion

FAQ accordion — a list of question/answer pairs that expand on click. Reused on several pages under an *_FAQ_CONFIG variable.

CTA banner CTA banner

Call-to-action banner — headline, short line of supporting copy, one or two buttons, and often a row of partner logos or award badges underneath.

People carousel/grid People carousel/grid

People carousel/grid — a JS array of team members or contacts (name, role, photo, links), rendered as cards.

Map/dashboard Map/dashboard

Interactive map/dashboard — city markers plotted over an image, each with a small data popover, plus a row of summary stats.

Logo/stat marquee Logo/stat marquee

Auto-scrolling logo/stat marquee — a strip of logos or numbers that drifts sideways continuously.

Tabbed product explorer Tabbed product explorer

Tabbed product/feature explorer — a set of tabs, each revealing its own feature list and supporting visual.

Expandable cards Expandable cards

Tabbed expandable cards — a row of buttons that swap a matching set of hover/expand image cards below them.

Static markup Static markup

Plain markup section — no JavaScript config object. Content (headings, paragraphs, list items, image paths) is written directly into the HTML tags, so you edit it the same way you'd edit any web page: find the text or src="..." attribute and change it in place.

8. Page-by-Page Worked Examples

Every custom content block found on the site, grouped by page, in the order it appears top-to-bottom. Each one shows its real code, what each field means in plain English, and exact steps to change it.

PageURLContent blocks
Home/5
About Us/about-us/9
Travel Tech (hub)/travel-tech/7
Tessera/travel-tech/tessera/6
Public Transport/travel-tech/public-transport/2
Tourism/travel-tech/tourism/1
Mobile (hub)/mobile/3
Banking Service/banking-service/4
MyBills/banking-service/my-bills/2
MycroBank/banking-service/mobile-mycrobank/2
MycroATM/banking-service/mycro-atm/0
Apps2Pay (hub)/apps2pay/7
Merchant Apps (MKPOS)/apps2pay/merchant-apps/4
Mint Lifestyles/apps2pay/mint-lifestyles/6
Billing Management System/billing-management-system/1

Home /

The main landing page — the ecosystem overview, the three business pillars, the live traffic-intelligence map, the business-unit carousel, and client testimonials.

Hero (video background + stats + client logos) section1.html Hero banner

Edit headline (an array of word/style pairs — keeps the two-tone “The Most / Reliable” effect), subtext, the two stats cards, the two certs badge logos, and the clientLogos marquee array (name / href / imgSrc per logo).

CONFIG = {
    // dim, pop, normal, 
    headline: [
        { words: [{ text: "The", type: "dim" }, { text: " Most", type: "dim" }] },
        { words: [{ text: "Reliable", type: "dim" }] },
        { words: [{ text: "Front End", type: "dim" }] },
        { words: [{ text: "Banking", type: "dim" }, { text: " Solutions", type: "dim" }] }
    ],
    subtext: "Pioneering secure banking technology with ISO-certified solutions. Trusted by 100+ institutions across Indonesia.",
    stats: [
        { label: "Our Reach", value: "Beyond 9K", sub: "Ticketing Points" },
        { label: "Proven Trust", value: "100+", sub: "Institutions" }
    ],
    certs: [
        { name: "SGS", src: "/wp-content/uploads/2025/11/temp_g1.png" },
        { name: "URS/UKAS", src: "/wp-content/uploads/2026/03/ISO-9001_UKAS_URS.png.webp" }
    ],
    clientLogos: [
        { name: "Bank Mandiri", href: "/clients/bank-mandiri"
  ...
}

What the fields mean:

  • headline — the main heading text
  • type — the text/value for this field
  • subtext — the supporting line under the heading
  • stats — the stat's number/value
  • value — the number/value shown
  • sub — the text/value for this field
  • certs — the text/value for this field
  • src — the text/value for this field
  • clientLogos — the path to the logo image
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  1. Open home/section1.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — headline, words, stats, certs, clientLogos. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

“One Ecosystem, Three Pillars” (Travel Tech / Mobile / Apps2Pay) section2.html Static markup

Edit eyebrow, heading/headingAccent, subtitle, and the pillars array (tag, icon, color, title, description, and each pillar's products list).

MKP_WHATWEDO_CONFIG = {
  eyebrow: "What We Do",
  heading: "One Ecosystem,",
  headingAccent: "Three Pillars",
  subtitle: "From travel technology to banking infrastructure and fintech — MKP powers the digital systems Indonesia relies on.",

  pillars: [
    {
      tag: "MKP Traveltech",
      icon: "plane",
      color: "orange",
      title: "Digital Ecosystem for Tourism & Transport",
      description: "Building a new digital ecosystem for tourism, public transport, and lifestyle — delivering multiplier effect in travel product & global distribution.",
      products: [
        { name: "Tessera Lifestyle",           detail: "Inventory supplier for banking platforms" },
        { name: "Tessera Corporate Travel",    detail: "Centralized booking & reporting" },
        { name: "Tessera API",                 detail: "Two-way global inventory exchange" },
        { name: "Ticketing Management System", detai
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • heading — the heading text
  • headingAccent — the heading text
  • subtitle — the heading/title text
  • pillars — the text/value for this field
  • icon — which icon/emoji is shown
  • color — the text/value for this field
  • title — the heading/title text
  • description — the paragraph/description text
  • products — the text/value for this field
  1. Open home/section2.html and find MKP_WHATWEDO_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — pillars, products, stats, badges. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Traffic Intelligence dashboard (interactive map) section3.html Map/dashboard

Edit eyebrow/heading/subtitle, the cityMap list (each city's name, x/y position on the map image, color, dot size, label position), and the summary stats row.

MKP_TRAFFIC_CONFIG = {
  eyebrow: "Traffic Intelligence",
  heading: "Powering One Intelligent Dashboard.",
  subtitle: "Beyond Monitoring Global Distribution",

  // Cities on the map
  cities: [
    { name: "JAKARTA",      x: 227.5, y: 261.3, color: "orange",  size: 4,   labelPos: "below" },
    { name: "SURABAYA",     x: 340.8, y: 281.6, color: "orange",  size: 3.5, labelPos: "above" },
    { name: "BALI",         x: 385.7, y: 302.7, color: "orange",  size: 3,   labelPos: "below" },
    { name: "BATAM",        x: 173.4, y: 121.8, color: "orange",  size: 3,   labelPos: "right" },
    { name: "MAKASSAR",     x: 469.1, y: 240.8, color: "orange",  size: 3,   labelPos: "right" },
    { name: "MANADO",       x: 572.9, y: 113.8, color: "default", size: 2.5, labelPos: "above" },
    { name: "JAYAPURA",     x: 877.8, y: 190.6, color: "blue",    size: 3,   labelPos: "left" },
    { name: "SEMARANG",     x: 296.1, y
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • heading — the heading text
  • subtitle — the heading/title text
  • x — the text/value for this field
  • y — the text/value for this field
  • color — the text/value for this field
  • size — the text/value for this field
  • labelPos — the label text
  • stats — the stat's number/value
  • label — the label text
  1. Open home/section3.html and find MKP_TRAFFIC_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — cities, stats. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Business unit card carousel (‘01/08’ rotating cards) section4.html Static markup

Edit the items array — 8 entries, each with id, title, logo, background image, description and link. This powers the auto-rotating “BUSINESS UNIT” cards seen further down the homepage.

items = [
  {   id: "cf-1",
        title: "TRAVEL TECHNOLOGY",
        logo: "/wp-content/uploads/2026/04/logo_tessera_putih.webp",
        background: "/wp-content/uploads/2026/04/home_slider_tessera-scaled.jpg",
        description: "Delivers multiplier effect in travel products and global distributions.",
        link: "/travel-tech/tessera"
    },
  {
        id: "cf-2",
        title: "TRAVEL TECHNOLOGY",
        logo: "/wp-content/uploads/2026/01/mkp_public_transport.png",
        background: "/wp-content/uploads/2026/04/Aset-Website_Slider_Public-Transport-scaled.webp",
        description: "Provide National Standard Maritime Transportation certified by SE DJPL 33, 2023",
        link: "/travel-tech/public-transport"
    },
  ...
]

What the fields mean:

  • id — the text/value for this field
  • title — the heading/title text
  • logo — the path to the logo image
  • background — the path to the background image
  • description — the paragraph/description text
  • link — the link this points to (a full URL, or "#" if there's no page yet)
  1. Open home/section4.html and find items near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its id text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Client testimonials (video carousel) section5.html People carousel/grid

Edit the partners array — name, role, avatar (leave "" for an auto-generated initials badge), testimony quote, video thumbnail and video file.

partners = [
  {
      name: "I Putu Suardhana S.E., M.M",
      role: "Direktur Utama Perumda Pasar Argha Nayottama",
      avatar: "",
      testimony: "Transparansi dan akuntabilitas dapat dikelola secara lebih efektif melalui digitalisasi yang didukung oleh MKP.",
      videoThumb: "/wp-content/uploads/2026/02/mkp_vid_thumbnail_putu_suardhana.webp",
      videoUrl: "/wp-content/uploads/2026/02/mkp_vid_Argha-Nayottama.mp4"
    },
  {
      name: "Yondri Latumanuwey",
      role: "App Development & Delivery Channel Analyst BPD Maluku Utara",
      avatar: "",
      testimony: "Sistem penerimaan dan pembayaran pajak daerah, sistem retribusi dari MKP sangat membantu mempermudah seluruh sistem retribusi baik di skala kota maupun provinsi.",
      videoThumb: "/wp-content/uploads/2026/02/mkp_vid_bpd_maluku.webp",
      videoUrl: "/wp-content/uploads/2026/02/mkp_vid_BPD-Maluku-Malut-Mobile.mp4"
    },
  ...
]

What the fields mean:

  • name — the display name
  • role — the job title / role
  • avatar — the path to the photo (leave as "" to auto-generate an initials badge)
  • testimony — the quote text
  • videoThumb — the path to the video file
  • videoUrl — the link this points to (a full URL, or "#" if there's no page yet)
  1. Open home/section5.html and find partners near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its name text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

About Us /about-us/

Company story, leadership, certifications, a second walk-through of the three business units, and branch office listings.

Hero + stats (video background) section1.html Hero banner

Edit the theme colors (accentPrimary/overlayDark), headingLine1/headingAccent, subtitle, the mission line, the animated establishedLabel counter, and the certification badges.

MKP_HERO_CONFIG = {

  /* --- THEME (swap these to reuse for any brand) ---
     accentPrimary  : eyebrow text, badge dots, mission card top bar
     accentSecondary: vision card top bar, vision tag color
     gold           : established year number, badge dots, est. border
     overlayDark    : hero background + card backgrounds (dark cinematic)
  --------------------------------------------------- */
  theme: {
    accentPrimary:   "#F37748",   // orange
    accentSecondary: "#7A80C0",   // blue-light
    gold:            "#C9A84C",
    overlayDark:     "#060a14"
  },

  /* --- HERO TEXT --- */
  eyebrow: "About PT Mitra Kasih Perkasa",
  headingLine1: "The Most Reliable",
  headingAccent: "Front End Banking",  // rendered in orange gradient
  headingLine3: "Solutions",
  subtitle: "Established in 2018, MKP creates interlocking value in front-end banking — powering digital transformation across Indones
  ...
}

What the fields mean:

  • overlayDark — the text/value for this field
  • headingLine1 — the heading text
  • headingAccent — the heading text
  • subtitle — the heading/title text
  • mission — the text/value for this field
  • establishedLabel — the label text
  • animateTo — the text/value for this field
  • suffix — the text/value for this field
  • label — the label text
  • poster — the path to the preview image
  1. Open about-us/section1.html and find MKP_HERO_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — stats. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Our Story (with metric cards) section2.html Static markup

No JS config — this is static markup. Edit the paragraph text and the four metric cards (11T+, 145M+, 500+, 12K+, plus the two full-width “Institutions” / “Years of Operation” bars) directly in the HTML.

<h2>Mitra Kasih Perkasa</h2>
<p>Trusted Front-End Banking Enabler for TravelTech & Open Finance</p>
<p>PT Mitra Kasih Perkasa (MKP) is a leading Travel Tech company in Southeast Asia. specializing in e-ticketing s…</p>
  1. Open about-us/section2.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

Three Pillars (repeated from Home) section3.html Static markup

Same three-pillar concept as the homepage, restyled for this page. No JS config — edit the card text and product bullet lists directly in the HTML.

<h2>Three Pillars. One Ecosystem.</h2>
<p>Three strategic business units powering an integrated front-end banking, e-ticketing, and digital payment ecos…</p>
<h3>Digital Ecosystem for Tourism & Transport</h3>
  1. Open about-us/section3.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

Board of Directors (photo carousel) section4.html People carousel/grid

Edit the members array — name, role, LinkedIn URL, photo, bio paragraph(s), and (optionally) email. Currently 3 directors.

members = [
  {
      name: "NICHOLAS ANGGADA",
      role: "Co-Founder & CEO",
      linkedin: "https://id.linkedin.com/in/nicholasanggada",
      photo: "/wp-content/uploads/2026/04/Aset-Website-Foto-BOD_nicholas.png",
      bio: [
        "Every milestone we achieve strengthens our position as a travel technology company that connects local operators to global distribution networks. We are not just building systems, we are building bridges that enable destinations, partners, and users to move seamlessly across borders.",
      ]
    },
  {
      name: "IRAWAN WU",
      role: "Co-Founder & CEO",
      email: "irawan@mitrakasihperkasa.com",
      linkedin: "https://id.linkedin.com/in/irawan-wu-b2495660",
      photo: "/wp-content/uploads/2026/04/Aset-Website-Foto-BOD_irawan.png",
      bio: [
        "MKP stands as more than a technology provider, we are a trusted financial and banking partner. By integrating payment, validation, and distribution into one reliable ecosystem, we empower institutions and businesses to accelerate digital transformation with confidence"
      ]
    },
  ...
]

What the fields mean:

  • name — the display name
  • role — the job title / role
  • linkedin — the LinkedIn profile link
  • photo — the path to the image file (see Section 5 for how to upload one and get this path)
  • bio — the text/value for this field
  1. Open about-us/section4.html and find members near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its name text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Executive Key Person (team grid) section5.html People carousel/grid

Edit the team array — name, role, email, LinkedIn, photo. Several additional members are already written but commented out (// { ... }) further down the array — uncomment a block to bring someone back onto the page.

team = [
  {
        name: "Febrian Wicaksono",
        role: "SVP Product & Innovation",
        email: "febrian@mitrakasihperkasa.com",
        linkedin: "https://id.linkedin.com/in/febrian-wicaksono-sutrisno-49498a172",
        photo: "/wp-content/uploads/2026/04/Aset-Website-Foto-BOD_febrian.png" },
  {   name: "Queentina Jayawardhani Surya P.",
        role: "VP Operations",
        email: "queentina@mitrakasihperkasa.com",
        linkedin: "https://id.linkedin.com/in/queentina-suryaputra-16212a112",
        photo: "/wp-content/uploads/2026/04/Aset-Website-Foto-BOD_queentina.png" },
  ...
]

What the fields mean:

  • name — the display name
  • role — the job title / role
  • email — the contact email address
  • linkedin — the LinkedIn profile link
  • photo — the path to the image file (see Section 5 for how to upload one and get this path)
  1. Open about-us/section5.html and find team near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its name text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Certifications & Awards section6.html Static markup

No JS config. Edit the ISO badge images, the two certification cards (SGS / URS-UKAS), and the list of award pills directly in the HTML.

<h2>Certified. Awarded. Trusted.</h2>
<p>Certified by ISO, we uphold global standards in quality, security, and operational performance.</p>
  1. Open about-us/section6.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

Business units sticky-scroll (Travel Tech / Mobile / Apps2Pay) section7.html Sticky-scroll carousel

Edit the contentLists array — label, title, intro paragraph, primary button, image, and the card title/description shown on the image side. 3 entries (one per business unit).

contentLists = [
  {
        label: 'MKP Ecosystem',
        title: 'MKP Travel Technology',
        intro: 'MKP delivers smart e-ticketing and travel technology solutions that simplify global mobility. Our integrated platform streamlines ticketing, access, and operations for public transportation and tourism services, enabling more efficient, connected, and seamless travel experiences for operators and users.',
        points: [],
        btnPrimary: { text: 'Explore More', url: '/travel-tech' },
        image: '/wp-content/uploads/2026/03/img_traveltech.webp',
        cardTitle: 'MKP Travel Technology',
        cardDesc: 'connecting your Public Transport and Tourism into Global Distribution System.'
      },
  {
        label: 'Integrated Technology System',
        title: 'MKP Mobile',
        intro: 'MKP delivers end-to-end Bank-as-a-Service solutions including front-end applications, middleware engines, and core banking systems. Our platform enables financial institutions and businesses to launch scalable digital banking experiences with speed, flexibility, and security.',
        points: [],
        btnPrimary: { text: 'Explore More', url: '/mobile' },
        image: '/wp-content/uploads/2026/03/img_mobile.webp',
        cardTitle: 'MKP Mobile',
        cardDesc: 'Stay connected anytime, anywhere.'
      },
  ...
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • btnPrimary — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open about-us/section7.html and find contentLists near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Business units expandable cards section8.html Expandable cards

Edit the businessUnits object — one array per tab (mkp-travel, mkp-mobile, apps2pay), each holding {title, desc, image, url} cards.

businessUnits = {
    "mkp-travel": [
      { title: "Tourism", desc: "End-to-end e-ticketing and distribution system for tourism destinations.", image: "/wp-content/uploads/2026/03/img_tourism.webp", url: '/travel-tech/tourism' },
      { title: "Public Transport", desc: "Integrated ticketing and fare management for public transport operators.", image: "/wp-content/uploads/2026/03/img_public-transport.webp", url: '/travel-tech/public-transport/' },
      { title: "Tessera", desc: "Smart access and validation technology for secure transaction processing.", image: "/wp-content/uploads/2026/03/img_tessera.webp", url: '/travel-tech/tessera' }
    ],
    "mkp-mobile": [
      { title: "Banking", desc: "Front-end digital banking solution for financial institution expansion.", image: "/wp-content/uploads/2026/03/img_banking.webp", url: '/banking-service/' },
      { title: "Mint", desc: "Digital financial pla
  ...
}

What the fields mean:

  • desc — the paragraph/description text
  • image — the path to the image file
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • apps2pay — the text/value for this field
  1. Open about-us/section8.html and find businessUnits near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — travel, mobile, apps2pay. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Branch Offices section9.html Static markup

Edit the OFFICE_DATA array — city, whether it's the HQ (isHQ), address, and a Google Maps link. Currently 4 offices (Semarang HQ, Jakarta, Bali, Surabaya).

OFFICE_DATA = [
  {
    city: "Semarang",
    isHQ: true,
    address: "Jl. Singosari I no.8, Kel. Pleburan, Kec. Semarang Selatan, Semarang, Jawa Tengah 50241",
    mapLink: "https://maps.app.goo.gl/fKF4iuzzXEeGDte48 " 
  },
  {
    city: "Jakarta",
    isHQ: false,
    address: "Neo Soho, Jl. Letjen S. Parman, No.Kav. 28, RT.3/RW.5, Jakarta Barat, 11470, Unit 2327",
    mapLink: "https://www.google.com/maps/search/Neo+Soho+Mall+Jakarta"
  },
  ...
]

What the fields mean:

  • city — the city name
  • isHQ — whether this is the head office (true/false)
  • address — the street address
  • mapLink — the Google Maps link
  1. Open about-us/section9.html and find OFFICE_DATA near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its city text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Travel Tech (hub) /travel-tech/

Hub page for the Travel Tech business unit, spotlighting Tessera, Public Transport and Tourism, plus a shared FAQ.

Hero section1.html Hero banner

Edit bgImage, badge, headline, the keyValues checklist, both buttons, and the floating stat chips (floatCards).

MKP_TT_HERO_CONFIG = {
  bgImage: "/wp-content/uploads/2026/04/mkp_public_transport-scaled_new.webp",
  badge: "MKP Group · Indonesia's Travel Tech Pioneer",
  headline: "MKP Travel\n<span class='tth-hl'>Technology</span>",
  
  // NARRATIVE UPDATED
  subtext: "More than an e-ticketing platform MKP Travel Tech powers an integrated digital ecosystem for tourism, transport, and lifestyle, connecting banks, operators, and governments.",

  keyValues: [
    "E-Ticketing for Tourism & Cultural Destinations",
    "Indonesia's First Boarding Management System",
    "Lifestyle Webview Embedded in Mobile Banking",
    "Verified · SE-DJPL No. 33/2023"
  ],

  btnPrimary:   { label: "Explore Our Products →", href: "/travel-tech/tessera",  style: "navy" },
  btnSecondary: { label: "Request Product Deck",   href: "https://wa.me/+6288296013756",  style: "gold" },

  floatCards: [
    { label: "Connected to",      value: "
  ...
}

What the fields mean:

  • bgImage — the path to the background image
  • badge — the small pill/label text
  • headline — the main heading text
  • keyValues — the number/value shown
  • btnPrimary — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  • style — the text/value for this field
  • btnSecondary — the button's label text and link
  • floatCards — the text/value for this field
  • value — the number/value shown
  1. Open travel-tech/section1.html and find MKP_TT_HERO_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — floatCards. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Ecosystem overview (stats + logos) section2.html Static markup

Edit the left object (eyebrow/headline/sub/stats) and the right object (partner logos and certs).

CONFIG = {
  left: {
    eyebrow: "MKP Traveltech",
    headline: "Build a new Digital Ecosystem for the better future of Indonesia",
    sub: "Tourism, Public Transport, and Lifestyle — connected in one seamless travel technology platform.",
    stats: [
      { num: "+500",  lbl: "Ticketing Points"    },
      { num: "25+",   lbl: "Years Experience"     },
      { num: "200+",  lbl: "Partner Institutions" },
      { num: "3",     lbl: "Product Pillars"      }
    ]
  },
  right: {
    eyebrow: "Trusted Partners",
    headline: "Trusted by Indonesia's Leading Institutions",
    logos: ["BRI","BNI","Mandiri","BTN","BCA","BSI","PELNI","BP Batam","PELINDO","Pasar Jaya"],
    certs: ["ISO 9001:2015 QMS","ISO 27001:2022 ISMS","SE-DJPL No. 33/2023"]
  }
}

What the fields mean:

  • left — the text/value for this field
  • headline — the main heading text
  • sub — the text/value for this field
  • stats — the stat's number/value
  • lbl — the text/value for this field
  • right — the text/value for this field
  • logos — the path to the logo image
  • certs — the text/value for this field
  1. Open travel-tech/section2.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — stats. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Tessera product spotlight section3.html Static markup

Edit eyebrow/name/tagline, the features list, subProducts, the showcase image, and the button.

CONFIG = {
  eyebrow: "MKP Travel Technology Products",
  name:    "TESSERA",
  tagline: "Delivers A Multiplier Effect In Travel Product And Global Distribution",
  features: [
    {
      icon:  "🔗",
      title: "One Connection, Multi Inventory",
      desc:  "The robust API making growth a matter of connection"
    },
    {
      icon:  "✈️",
      title: "Suitable For Corporate Business Travel",
      desc:  "Tessera connect your business to competitive travel deals and effortless reporting through a fully integrated B2B System"
    },
    {
      icon:  "📱",
      title: "Leading Lifestyle in Banking Partner",
      desc:  "Help extend more value to your users by integrating multi-inventory services into your digital ecosystem through a single webview"
    }
  ],
  subProducts: [
    { name: "Tessera Lifestyle",        tag: "B2B2C" },
    { name: "Tessera Corporate Travel", tag: "B2B"   },
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • name — the display name
  • tagline — the short supporting line under the heading
  • features — one bullet/feature line
  • title — the heading/title text
  • desc — the paragraph/description text
  • subProducts — the text/value for this field
  • tag — the small pill/label text
  • image — the path to the image file
  • btn1 — the button's label text and link
  1. Open travel-tech/section3.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — features, subProducts. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Public Transport spotlight section4.html Static markup

Edit eyebrow/headline/tagline, the certStamp, showcase image, features list, and button.

CONFIG = {
  eyebrow:   "Our Solutions",
  headline:  "Public\nTransport",
  tagline:   "Indonesia's First Boarding Management System",
  certStamp: "Verified by SE-DJPL No. 33/2023 — Directorate General of Sea Transportation",
  image:     "/wp-content/uploads/2026/04/mkp_public_transport-scaled_new.webp",
  features: [
    {
      icon:  "🖥️",
      title: "One Site & Online Ticketing",
      desc:  "Enabling self kiosk for instant booking, payment, and boarding pass printing, while expanding online distribution for passenger convenience"
    },
    {
      icon:  "🏦",
      title: "Leading Lifestyle Webview for Public Transport",
      desc:  "Brings public transport ticketing into lifestyle platforms, by integrating with mobile banking"
    },
    {
      icon:  "✅",
      title: "Verified by the Directorate General of Sea Transportation",
      desc:  "MKP upholds trusted and compliant digit
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • headline — the main heading text
  • tagline — the short supporting line under the heading
  • certStamp — the text/value for this field
  • image — the path to the image file
  • features — one bullet/feature line
  • title — the heading/title text
  • desc — the paragraph/description text
  • btn1 — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  1. Open travel-tech/section4.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — features. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Tourism spotlight section5.html Static markup

Edit eyebrow/headline/tagline, background image, features, and the metrics row.

CONFIG = {
  eyebrow:  "Our Solutions",
  headline: "Tourism",
  tagline:  "Advance Your Tourism Business",
  bgImage:  "https://mitrakasihperkasa.com/wp-content/uploads/2026/01/d2aa79572f0a0295de43a420dd8d4ab4c2e0dd10-scaled.jpg",
  features: [
    {
      icon:  "🌏",
      title: "International Tourism Standard in Cultural Destinations",
      desc:  "Support global tourism standards while preserving and celebrating Indonesia's rich cultural heritage"
    },
    {
      icon:  "📊",
      title: "Real-Time Power For Tourism Leaders",
      desc:  "Enable real-time traffic monitoring and reporting to drive smarter, data-driven tourism operations"
    },
    {
      icon:  "🎫",
      title: "One Man, One Ticket",
      desc:  "Secure, transparent, and accountable ticketing for sustainable and fraud-free tourism management"
    }
  ],
  metrics: [
    { icon: "🏛️", title: "Cultural Destinations",
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • headline — the main heading text
  • tagline — the short supporting line under the heading
  • bgImage — the path to the background image
  • features — one bullet/feature line
  • title — the heading/title text
  • desc — the paragraph/description text
  • metrics — the text/value for this field
  • sub — the text/value for this field
  • btn1 — the button's label text and link
  1. Open travel-tech/section5.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — features, metrics. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

CTA + awards section6.html CTA banner

Edit eyebrow/headline/sub, the button, and the awards list.

CONFIG = {
  eyebrow:  "Get Started",
  headline: "Ready to Build the Future of Indonesian Travel Technology?",
  sub:      "Whether you're a bank, transport operator, or tourism destination — MKP has the platform to take you there.",
  btn1: { label: "Request a Product Deck", href: "https://wa.me/+6288296013756" },
  awards: [
    "🏆 Infobank Top Young CEO 2025",
    "🤝 Trip.com Strategic Partnership 2024",
    "🚢 PELNI Appreciation Night 2024",
    "🚂 Ministry of Transport DJKA 2024",
    "📊 Infobank 200 Future Leaders 2024"
  ]
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • headline — the main heading text
  • sub — the text/value for this field
  • btn1 — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  • awards — the text/value for this field
  1. Open travel-tech/section6.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

FAQ section7.html FAQ accordion

Edit eyebrow/title/subtitle and the list of question/answer pairs.

MKP_FAQ_CONFIG = {

  eyebrow: "Got Questions?",

  title: "Frequently Asked <span>Questions</span>",

  subtitle: "Everything you need to know about MKP Travel Tech and our integrated digital platform.",

  /* Add, remove, or reorder FAQ items below.
     For bullet lists inside an answer, use the "list" key.
     "text" supports plain paragraphs. */
  faqs: [
    {
      question: "What is MKP Travel Tech?",
      answer: [
        { text: "MKP Travel Tech is a business unit of MKP that provides digital solutions for transportation, tourism, and public services. From ticketing (e-ticketing) and boarding systems to cashless payments and data analytics, everything is integrated into one seamless platform." }
      ]
    },
    {
      question: "Is MKP's system compliant with regulations?",
      answer: [
        { text: "Yes. MKP's system complies with applicable regulations, including certification un
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • title — the heading/title text
  • subtitle — the heading/title text
  • answer — the text/value for this field
  1. Open travel-tech/section7.html and find MKP_FAQ_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — faqs, answer. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Tessera /travel-tech/tessera/

Deep-dive product page for the Tessera ticketing platform.

Hero (video background) section1.html Hero banner

Edit the accent colors, the three-line heading (headingLine1/headingAccent/headingLine3), subtitle, and the background video source/poster.

TESSERA_HERO_CONFIG = {

  /* --- THEME --- */
  theme: {
    accentPrimary:   "#2B3499",  // MKP deep blue
    accentSecondary: "#F37748",  // MKP orange
    gold:            "#F37748",
    overlayDark:     "#060e1a"
  },

  /* --- HERO TEXT --- */
  eyebrow:       "MKP TravelTech",
  headingLine1:  "TESSERA Powering Travel",
  headingAccent: "With a Multiplier",
  headingLine3:  "Effect",
  subtitle:      "A seamless, scalable, and smart travel ecosystem — connecting banks, airlines, hotels, and experiences into a single intelligent platform.",

  /* --- BADGES --- */
  badges: ["Seamless", "Scalable", "Smart"],

  /* --- VIDEO --- */
  video: {
    src:    "/wp-content/uploads/2026/03/tessera-hero.mp4",
    poster: "/wp-content/uploads/2026/03/tessera-hero-poster.jpg"
  }

}

What the fields mean:

  • overlayDark — the text/value for this field
  • headingLine1 — the heading text
  • headingAccent — the heading text
  • headingLine3 — the heading text
  • subtitle — the heading/title text
  • poster — the path to the preview image
  1. Open travel-tech/tessera/section1.html and find TESSERA_HERO_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

About / stat strip section2.html Static markup

Edit the array of stat blocks — each has a number, label, icon, title and subtitle.

C = {

    /* --- SECTION LABEL (small text above heading) --- */
    eyebrow: "About Tessera",

    /* --- MAIN HEADING --- */
    heading: "Travel Technology Ecosystem & Distribution Platform.",

    /* --- PARAGRAPH BELOW HEADING --- */
    description: "Tessera connects travel and lifestyle products into one ecosystem, delivering multiplier effects and enabling banks, platforms, and businesses to distribute travel services seamlessly through our secure API.",

    /* --- THREE STATS shown below the description --- */
    stats: [
      { num: "6+",    label: "Transport Modes"  },
      { num: "100K+", label: "Flight Routes"    },
      { num: "1M+",   label: "Hotel Properties" }
    ],

    /* --- FLOATING BADGE (bottom-left of video) --- */
    badge: {
      icon:     "🌏",
      title:    "Global Distribution",
      subtitle: "One API · Every Vertical"
    },

    /* --- VIDEO
  ...
}

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • subtitle — the heading/title text
  1. Open travel-tech/tessera/section2.html and find C near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — stats. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Distribution network carousel section3.html Sticky-scroll carousel

Edit heading/description, the partner logos, and the carousel allSlides (image, title, subtitle, chip label, stats).

TESSERA_DIST_CONFIG = {

  /* --- SECTION HEADER --- */
  eyebrow:     "Distribution Network",
  heading:     "One API for Every Travel Vertical",
  description: "Access real-time inventory, pricing, and availability across every mode of travel — flights, hotels, trains, ferries, and more.",

  /* --- HERO SLIDE (first card — full bleed image) --- */
  heroSlide: {
    label:    "Overview",
    image:    "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1600&q=80",
    title:    "Powering Travel Distribution",
    subtitle: "One API. Every vertical. Seamless integration across flights, hotels, trains, ferries, and more.",
    chip:     "Tessera Distribution"
  },

  /* --- CONTENT SLIDES --- */
  slides: [
    {
      label: "Flight", title: "Flight", num: "01",
      desc: "Seamless flight inventory distribution through Tessera API, enabling partners to access real-time schedules, pricing, and
  ...
}

What the fields mean:

  • heading — the heading text
  • description — the paragraph/description text
  • image — the path to the image file
  • title — the heading/title text
  • subtitle — the heading/title text
  • chip — one small pill/tag label
  • num — the number shown
  • desc — the paragraph/description text
  • stats — the stat's number/value
  • label — the label text
  1. Open travel-tech/tessera/section3.html and find TESSERA_DIST_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — slides, stats. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Feature slides (sticky-scroll) section4.html Sticky-scroll carousel

Edit the SLIDES array — label, title, intro, bullet points, button, image, card title/description. 3 slides.

SLIDES = [
  {
    label: "Our Products",
    title: "TESSERA Lifestyle",
    intro: "Travel & lifestyle inventory for banking, fintech, and telco platforms. Designed to enrich your digital ecosystem with ready-to-deploy lifestyle services through a seamless webview experience.",
    points: [
      {
        title: "Designed for Digital Lifestyle Ecosystems",
        description: "Acts as a leading lifestyle inventory supplier, enabling partners to enhance user engagement through a ready-to-use webview interface."
      },
      {
        title: "Flexible Integration Model",
        description: "Microsite and webview interfaces can be embedded directly inside mobile apps or partner platforms."
      },
      {
        title: "Built-in Promo & Campaign Engine",
        description: "Includes a configurable promotion and activation engine to support marketing and growth initiatives."
      }
    ],
    btnPrimary: { text: "Explore More", url: "/ticketing" },
    image: "https://images.unsplash.com/photo-1566073771259-6a8506099945?w=520&h=620&fit=crop",
    cardTitle: "TESSERA Lifestyle",
    cardDesc: "Travel & lifestyle inventory for banking, fintech, and telco platforms."
  },
  {
    label: "Our Products",
    title: "TESSERA B2B Platform",
    intro: "A B2B platform for corporates and travel agents that provides immediate access to travel inventory and operational tools for efficient, auditable business workflows.",
    points: [
      {
        title: "Enterprise-Grade Accountability",
        description: "Centralized booking platform with transparent workflows, audit trails, and structured reporting."
      },
      {
        title: "Flexible Payment & Credit Management",
        description: "Supports multiple payment methods, deposit schemes, and credit facilities integrated with banking systems."
      },
      {
        title: "Instant Access & Fast Onboarding",
        description: "Ready-to-use platform with quick setup so partners can access travel inventory without complex integration."
      }
    ],
    btnPrimary: { text: "Explore More", url: "/ticketing" },
    image: "https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=520&h=620&fit=crop",
    cardTitle: "TESSERA B2B Platform",
    cardDesc: "Corporate & travel agent platform for efficient, auditable business workflows."
  },
  ...
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • description — the paragraph/description text
  • btnPrimary — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open travel-tech/tessera/section4.html and find SLIDES near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

“Unified Dashboard” blurb section5.html Static markup

No JS config — just a paragraph and a bullet list. Edit the text directly.

<p>Unified Dashboard by MKP provides you real time data in every transaction, ticket, and visitor flow is visible…</p>
  1. Open travel-tech/tessera/section5.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

FAQ section6.html FAQ accordion

Same FAQ pattern as the Travel Tech hub — edit the question/answer list.

MKP_FAQ_CONFIG = {

  eyebrow: "Got Questions?",

  title: "Frequently Asked <span>Questions</span>",

  subtitle: "Everything you need to know about Tessera and our integrated digital ecosystem.",

  /* Add, remove, or reorder FAQ items below.
     For bullet lists inside an answer, use the "list" key.
     "text" supports plain paragraphs. */
  faqs: [
    {
      question: "What is Tessera?",
      answer: [
        { text: "Tessera is a digital platform by MKP that connects various travel and lifestyle products into one integrated ecosystem. It drives a multiplier effect for businesses and users to access, distribute, and manage travel services more efficiently through a single platform." }
      ]
    },
    {
      question: "What is Tessera Lifestyle?",
      answer: [
        { text: "Tessera Lifestyle is a ready-to-use platform designed for end users. Through Tessera Lifestyle, users can easily
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • title — the heading/title text
  • subtitle — the heading/title text
  • answer — the text/value for this field
  1. Open travel-tech/tessera/section6.html and find MKP_FAQ_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — faqs, answer. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Public Transport /travel-tech/public-transport/

Product page for the Public Transport ticketing solution.

Feature list (5 items) section1.html Static markup

Edit the data array — each entry has a title (t), description (d) and icon (i).

data = [
  {
            t: "Built for High Volume Passenger Operations",
            d: "Passenger Flow Management, reducing congestion and manual intervention at terminals.",
            i: "/wp-content/uploads/2026/04/public_transport_1.webp"
        },
  {
            t: "Integrated Verification",
            d: "Built in Passport and ID verification integrated with secure databases to prevent fraud.",
            i: "/wp-content/uploads/2026/04/public_transport_2-scaled.webp"
        },
  ...
]

What the fields mean:

  • t — the text/value for this field
  • d — the text/value for this field
  • i — the text/value for this field
  1. Open travel-tech/public-transport/section1.html and find data near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its t text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Benefit blocks (2 items) section2.html Static markup

Edit the content array — label, title, intro, bullet points, a short title/description pair (t/d), and image.

content = [
  {
      label: 'MKP Ecosystem',
      title: 'Online Booking',
      intro: 'Real Time Ferry Schedule and Payment with Direct Boarding Access.',
      points: [
        { t: 'Real-Time Schedule', d: 'Live seating data provided directly by operators.' },
        { t: 'Direct Access', d: 'Proceed to boarding without additional physical counters.' }
      ],
      image: '/wp-content/uploads/2026/04/public_transport_online_booking-scaled.webp'
    },
  {
      label: 'Integrated Tech',
      title: 'On Site Booking',
      intro: 'Built for high traffic Ports, book and print tickets instantly.',
      points: [
        { t: 'Self-Service Kiosk', d: 'Complete transactions independently in under 2 minutes.' },
        { t: '100% Cashless', d: 'Supports QRIS, debit, and digital wallets.' }
      ],
      image: '/wp-content/uploads/2026/04/public_transport_offline_booking-scaled.webp'
    }
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • d — the text/value for this field
  • image — the path to the image file
  1. Open travel-tech/public-transport/section2.html and find content near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Tourism /travel-tech/tourism/

Product page for the Tourism e-ticketing solution.

Challenge timeline (image + step-by-step timeline) section1.html Static markup

No JS config — the left-hand image and every timeline step are written directly into the HTML. Edit the image src and each step's heading/paragraph in place.

<h3>Queueing Delays</h3>
<p>MKP e-Ticketing speeds up entry with QR & ID validation..</p>
<h3>Scattered Data</h3>
  1. Open travel-tech/tourism/section1.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

Mobile (hub) /mobile/

Hub page for the MKP Mobile / Bank-as-a-Service business unit.

Hero (video background) section1.html Hero banner

Edit badge, headline, subtext, the keyValues checklist, all three buttons, and the floating stat chips.

MKP_MOBILE_HERO_CONFIG = {

  badge: "MKP Group · Strategic Business Unit",

  headline: "Financial Ecosystem\n<span class='mm-hl'>Enabler</span>",

  subtext: "Transforming Payments into Transparent Revenue — end-to-end Bank-as-a-Service solutions for front-end applications, middleware engines, and core banking systems across Indonesia.",

  keyValues: [
    "Core Banking System for BPR, LPD & Koperasi",
    "Mobile Banking & Agent-Based Financial Services",
    "Digital Lifestyle Products for Banking Platforms",
    "Parking & Retribution Management Systems"
  ],

  btnPrimary:   { label: "Explore Our Products →", href: "#",  style: "navy" },
  btnSecondary: { label: "Request Product Deck",   href: "#",  style: "teal" },
  btnTertiary:  { label: "Talk to Us",             href: "#",  style: "ghost" },

  floatCards: [
    { label: "Annual API Hits",   value: "6M+",     sub: "MyBills platform"         },
    { l
  ...
}

What the fields mean:

  • badge — the small pill/label text
  • headline — the main heading text
  • subtext — the supporting line under the heading
  • keyValues — the number/value shown
  • btnPrimary — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  • style — the text/value for this field
  • btnSecondary — the button's label text and link
  • btnTertiary — the button's label text and link
  • floatCards — the text/value for this field
  1. Open mobile/section1.html and find MKP_MOBILE_HERO_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — floatCards. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Solutions sticky-scroll (MycroBank / MycroATM / MyBills / Laku Pandai / Core Banking) section2.html Sticky-scroll carousel

Edit the array — label, title, intro, bullet points, image, and up to two buttons. 5 entries, one per Mobile product.

MKP_MOBILE_SOLUTIONS = [
  {
    label: "Our Solutions",
    title: "MycroBank",
    intro: "Strengthening rural bank digital services through mobile banking integration and Apex support — delivering modern, compliant financial services to BPR and rural institutions.",
    points: [
      { title: "Mobile Banking for BPR & Rural Banks",      desc: "Full-featured mobile banking platform enabling BPR to offer digital fund transfers, balance checks, and savings management to their customers." },
      { title: "Apex Support & IT-Based Financial Services", desc: "Integrated Apex support to connect rural banks with national interbank systems, ensuring compliance and seamless fund flow." },
      { title: "Basic Transaction Banking + Lifestyle",      desc: "Combines core banking transactions with lifestyle products — PPOB, top-up, and QRIS — in a single rural banking super-app." }
    ],
    image: "https://mitrakasihperkasa.com/wp-content/uploads/2026/01/1cec169afa92730fe734dbd5cce0928f92ddab22.jpg",
    btn1: { label: "Explore More", href: "#" },
    btn2: { label: "Talk to Us",   href: "#" }
  },
  {
//     label: "Our Solutions",
//     title: "Billing Management System",
//     intro: "A Unified Digital Ecosystem for Billing, Payments, and Public Service Revenue",
//     points: [
//       { title: "Student Billing Solutions",          desc: "Integrated Student Billing System & University Digital Ecosystem" },
//       { title: "Market Retribution Billing System",  desc: "A Digital Market Retribution Billing System for Public Markets" },
//       { title: "PDAM Billing and Collection System", desc: "Comprehensive digital solution for customer billing, payments, and financial reporting." }
//     ],
//     image: "https://mitrakasihperkasa.com/wp-content/uploads/2026/01/0fbfb5acaa3dd92882a96976624d49acc813b1d4.jpg",
//     btn1: { label: "Explore More", href: "#" },
//     btn2: { label: "Talk to Us",   href: "#" }
//   },
  ...
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • desc — the paragraph/description text
  • image — the path to the image file
  • btn1 — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  • btn2 — the button's label text and link
  1. Open mobile/section2.html and find MKP_MOBILE_SOLUTIONS near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

CTA + partners + awards section3.html CTA banner

Edit eyebrow/headline/sub, both buttons, the partners logo row, and the awards list.

CONFIG = {
  eyebrow:  "Get Started",
  headline: "Ready to Transform Your Financial Operations?",
  sub:      "Whether you're a rural bank modernizing core banking, a government digitizing billing, or a cooperative expanding digital services — MKP Mobile has your platform.",

  btn1: { label: "Talk to Our Team →",       href: "mailto:contact@mkpmobile.com" },
  btn2: { label: "Request a Product Deck",   href: "mailto:contact@mkpmobile.com" },

  partnerLabel: "Trusted Banking Partners",
  partners: ["BRI","BNI","Mandiri","BTN","BCA","BSI","Bank Jateng","Bank Jatim","BPD Bali","Bank BJB","Bank Mega","Bank Maspion"],

  awards: [
    "🏆 Infobank Top Young CEO 2025",
    "🏦 BCA Best Banking Sales Partner",
    "📊 Infobank 200 Future Leaders 2024",
    "👔 Infobank Top 100 CEO 2023",
    "🤝 Trip.com Strategic Partnership 2024"
  ]
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • headline — the main heading text
  • sub — the text/value for this field
  • btn1 — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  • btn2 — the button's label text and link
  • partnerLabel — the label text
  • partners — the text/value for this field
  • awards — the text/value for this field
  1. Open mobile/section3.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Banking Service /banking-service/

Hub page for the front-end banking product family.

Feature slides (sticky-scroll) section1.html Sticky-scroll carousel

Edit the SLIDES array (3 entries) — same pattern as Tessera/MyBills/MycroBank/Billing Management System.

SLIDES = [
  {
    label: "Financial Solutions that Power Communities",
    title: "Wealth Management",
    intro: "A complete multi-investment platform embedded directly into your mobile banking app — deposits, mutual funds, stocks, and gold accessible in one seamless journey.",
    points: [
      {
        title: "Integrated Multi-Investment Access",
        description: "Deposits, mutual funds, stocks, and gold in one app — giving your customers a unified wealth-building experience."
      },
      {
        title: "Embedded Investment Journeys",
        description: "Drive higher CASA & fee-based income through curated investment flows built directly into your platform."
      },
      {
        title: "Real-Time Processing",
        description: "Seamless onboarding & secure transaction flow — from account opening to investment execution in minutes."
      }
    ],
    btnPrimary: { text: "Explore Wealth Management", url: "#" },
    image: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=800&q=80",
    cardTitle: "Wealth Management",
    cardDesc: "Deposits, mutual funds, stocks & gold — all in one embedded experience."
  },
  {
    label: "Financial Solutions that Power Communities",
    title: "Basic Transaction Banking",
    intro: "A full-featured transaction banking suite that enables your customers to manage accounts, transfer funds, and pay bills — all within a single, secure platform.",
    points: [
      {
        title: "Full Transaction Suite",
        description: "Balance inquiry, BI-Fast transfer, QRIS, and account management — covering every everyday banking need."
      },
      {
        title: "Flexible Banking Operations",
        description: "Support multi-account & multi-load programs to serve diverse customer segments and business models."
      },
      {
        title: "Secure Transactions with Real-Time History Tracking",
        description: "Enable instant fund transfers via BI-Fast and RTOL with real-time transaction experiences for your customers."
      }
    ],
    btnPrimary: { text: "Explore Transaction Banking", url: "#" },
    image: "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800&q=80",
    cardTitle: "Basic Transaction Banking",
    cardDesc: "BI-Fast, QRIS, multi-account support & real-time transaction history."
  },
  ...
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • description — the paragraph/description text
  • btnPrimary — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open banking-service/section1.html and find SLIDES near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Loyalty & Promo Engine feature cards section2.html Static markup

Edit the array of cards — label, url, tag, title, desc, icon.

CONFIG = {

  /* Small label above the title */
  badge: 'Core Features',

  /* Main heading — wrap words in <em> tags for gradient color */
  title: 'Built-in Loyalty & <em>Promo Engine</em>',

  /* Paragraph below the title */
  subtitle: 'Maximize Customer Lifetime Value dengan ekosistem loyalty end-to-end — dari earning hingga redemption, tier membership, hingga gamified engagement.',

  /* CTA button */
  cta: {
    label: 'Talk to Sales',
    url:   'https://wa.me/+628111608272'
  },

  /* ── Feature cards ──────────────────────────────────────────
     Add, remove, or reorder these objects freely.
     icon: paste any <svg>…</svg> string from https://lucide.dev
  ─────────────────────────────────────────────────────────── */
  features: [
    {
      tag:   'Earning Engine',
      title: 'Flexible Point Generation',
      desc:  'Generate poin secara fleksibel dari transaksi, aktivitas, ma
  ...
}

What the fields mean:

  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • title — the heading/title text
  • desc — the paragraph/description text
  • icon — which icon/emoji is shown
  1. Open banking-service/section2.html and find CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — features. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Core Banking Infrastructure section3.html Static markup

Edit badge/title/subtitle, the cta, and the features list (pill label, icon, description).

S5 = {

  badge:    'Infrastructure',
  title:    'Robust, Secure & <em>Scalable</em> Core Banking',
  subtitle: 'MKP delivers a modular banking architecture designed for performance, security, and full regulatory compliance.',
  cta:      { label: 'Talk to Sales', url: '#contact' },

  /* ── Tabs ─────────────────────────────────────────────────
     label    Short text shown on the tab button (≤ 2 words)
     tag      Orange category label inside the panel
     title    Panel heading
     desc     1–2 sentence description on the left side
     pill     Optional highlight badge (leave "" to hide)
     icon     SVG string — copy from https://lucide.dev
     features Array of { title, desc } objects
              features with 1–4 items auto-switch to single column
  ────────────────────────────────────────────────────────── */
  tabs: [
    {
      label: 'Account',
      tag:   'Account Mana
  ...
}

What the fields mean:

  • badge — the small pill/label text
  • title — the heading/title text
  • subtitle — the heading/title text
  • cta — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • tag — the small pill/label text
  • desc — the paragraph/description text
  • pill — the text/value for this field
  • icon — which icon/emoji is shown
  • features — one bullet/feature line
  1. Open banking-service/section3.html and find S5 near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — tabs, features. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

“Why Banking Services?” section4.html Static markup

Edit badge/title, the cta, the keywords list, and the feature icons/descriptions.

S6 = {

  badge:    'Why Choose MKP',
  title:    'Why <em>Banking Services</em>?',

  cta: { label: 'Get in Touch', url: '#contact' },

  /* ── Value props ────────────────────────────────────────────
     tag      Short category label (shown in detail card)
     title    Main heading for this prop
     short    One-line teaser shown under title on hover (left side)
     desc     Full description shown in the detail card (right)
     keywords Array of short keyword pills shown at bottom of card
     icon     SVG string from https://lucide.dev
  ─────────────────────────────────────────────────────────── */
  props: [
    {
      tag:      'End-to-End BaaS',
      title:    'End-to-End Bank-as-a-Service',
      short:    'Mobile app to middleware & core banking in one ecosystem',
      desc:     'MKP delivers the full banking stack — from customer-facing mobile apps to middleware integration
  ...
}

What the fields mean:

  • badge — the small pill/label text
  • title — the heading/title text
  • cta — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • short — the text/value for this field
  • desc — the paragraph/description text
  • keywords — one keyword pill
  • icon — which icon/emoji is shown
  1. Open banking-service/section4.html and find S6 near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — props. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

MyBills /banking-service/my-bills/

Product page for the MyBills billing product.

Feature slides (sticky-scroll) section1.html Sticky-scroll carousel

Edit the SLIDES array (3 entries) — same shared pattern as the other product pages.

SLIDES = [
  {
    label: "Digital Product Switching",
    title: "One Integration, 1,000+ Digital Products",
    intro: "Seamlessly connect your platform to a comprehensive digital product ecosystem through a single API integration. From bill payments to lifestyle services, power your business with reliable biller switching infrastructure trusted by leading financial institutions.",
    points: [
      {
        title: "Multi-Biller Access",
        description: "Connect to hundreds of billers across utilities, telco, insurance, and more through one unified gateway."
      },
      {
        title: "Proven Financial Partners",
        description: "Live integrations with Bank Jakarta, BNC, and RajaBiller powering millions of transactions."
      },
      {
        title: "Flexible Deployment",
        description: "Choose between webview integration for rapid go-live or full API access for complete customization."
      }
    ],
    btnPrimary: { text: "Explore More", url: "/apps2pay" },
    image: "/wp-content/uploads/2026/04/Aset-Website_Page-Mybills_One-Integration-scaled.webp",
    cardTitle: "Digital Product Switching",
    cardDesc: "One integration to 1,000+ digital products."
  },
  {
    label: "Billing Management System",
    title: "Streamline Billing Operations Across Sectors",
    intro: "A centralized billing management platform designed for government institutions, educational bodies, and utility providers. Digitize your collection process with end-to-end tracking, real-time reconciliation, and seamless payment channel integration.",
    points: [
      {
        title: "Multi-Sector Coverage",
        description: "Water billing, student billing, waste management, and traditional market retribution in one system."
      },
      {
        title: "Real-Time Reconciliation",
        description: "Automated payment matching and reporting reduces manual overhead and minimizes discrepancies."
      },
      {
        title: "Scalable Infrastructure",
        description: "Built to handle growing transaction volumes across multiple regions and payment channels."
      }
    ],
    btnPrimary: { text: "Explore More", url: "/apps2pay" },
    image: "/wp-content/uploads/2026/04/Aset-Website_Page-Mybills_Streamline-Billing-scaled.webp",
    cardTitle: "Billing Management System",
    cardDesc: "Centralized billing for government, education, and utilities."
  },
  ...
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • description — the paragraph/description text
  • btnPrimary — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open banking-service/my-bills/section1.html and find SLIDES near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Timeline (single scroll-following dot) section2.html Static markup

No JS config — each timeline card's icon, heading and paragraph are written directly into the HTML.

<h3>Instant Integration with MyBills</h3>
<p>Embedded Biller in your app without coding, less maintenance, always up to date. Start selling digital product…</p>
<h3>Boost Your Platform with MyBills API</h3>
  1. Open banking-service/my-bills/section2.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

MycroBank /banking-service/mobile-mycrobank/

Product page for the MycroBank mobile banking product.

Feature slides (sticky-scroll) section1.html Sticky-scroll carousel

Edit the SLIDES array (2 entries, with an extra outline-button field) — same shared pattern.

SLIDES = [
  {
    label: "Our Solutions",
    title: "Mobile Banking",
    intro: "Provide customers with full banking access directly from their mobile devices.",
    points: [
      {
        title: "Real-time balance inquiry",
        description: "Instantly check balances and manage accounts with real-time data visibility."
      },
      {
        title: "Secure fund transfers (intra-bank & inter-bank)",
        description: "Seamless intra-bank and inter-bank transfers, top-ups, and bill payments in one platform."
      },
      {
        title: "Digital loan application services",
        description: "Enable end-to-end digital loan applications and financial services through mobile channels."
      }
    ],
    btnPrimary: { text: "Explore More", url: "/ticketing" },
    image: "/wp-content/uploads/2026/04/mycrobank_mobilebanking-scaled.webp",
    cardTitle: "MKP Mobile Banking",
    cardDesc: "Stay connected anytime anywhere."
  },
  {
    label: "Our Solutions",
    title: "Lakupandai",
    intro: "Enable financial inclusion through agent-based banking.",
    points: [
      {
        title: "Mini ATM services",
        description: "Support cash-in, cash-out, and fund transfers through Mini ATM services."
      },
      {
        title: "Android EDC and mobile-based transactions",
        description: "Enable mobile-based transactions, PPOB, and bill payments via Android EDC devices."
      },
      {
        title: "Comprehensive PPOB Services",
        description: "Offer bill payments for electricity, water (PDAM), telecom, TV, BPJS, taxes, and other essential services in one platform."
      }
    ],
    btnPrimary: { text: "Explore More", url: "/mobile" },
    btnOutline: { text: "Talk to Us", url: "#" },
    image: "/wp-content/uploads/2026/04/mycrobank_lakupandai-scaled.webp",
    cardTitle: "MKP Lakupandai",
    cardDesc: "Stay connected anytime, anywhere."
  }
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • description — the paragraph/description text
  • btnPrimary — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open banking-service/mobile-mycrobank/section1.html and find SLIDES near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Digital Transformation Impact section2.html Static markup

No top-level JS array was detected here — check inside the <script> tag for any inline numbers/labels first; otherwise the stat cards and text can be edited directly in the HTML.

<h2>Digital Transformation Impact</h2>
<p>Lihat bagaimana MKP Banking Services mengubah tantangan perbankan tradisional menjadi keunggulan kompetitif di…</p>
<h3>Before MKP Banking Services</h3>
  1. Open banking-service/mobile-mycrobank/section2.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

MycroATM /banking-service/mycro-atm/

Product page for the MycroATM connectivity product.

No HTML widgets were found on this page — it is built entirely from standard Elementor widgets. Edit it directly in Elementor; there is no section file to reference.

Apps2Pay (hub) /apps2pay/

Hub page for the Apps2Pay fintech/payments business unit — the richest page on the site content-wise.

Hero section1.html Hero banner

Edit badge, headline, subtext, keyValues, both buttons, and the floating stat chips.

A2P_HERO_CONFIG = {
  badge:    "Part of MKP Group · Est. 2018",
  headline: ["Embedded Payment", "<span class='a2p-hl'>Infrastructure</span>", "for Banking & Enterprise"],
  subtext:  "A modular payment and billing platform designed to help banks and enterprise partners expand digital services, accelerate merchant acquisition, and unlock new revenue streams.",
  keyValues: [
    "Omni-channel payment infrastructure",
    "Embedded lifestyle services",
    "Enterprise billing & retribution",
    "Integrated with MKP ecosystem"
  ],
  btnPrimary:   { label: "Request Product Deck →", href: "#contact" },
  btnSecondary: { label: "Contact Us",             href: "#contact" },
  floatCards: [
    { label: "Processing Value",  value: "IDR 11T+", sub: "Trillion Rupiah"    },
    { label: "Total Transactions",value: "145M+",   sub: "Across all channels" },
    { label: "Payment Terminals", value: "12K+",    sub: "
  ...
}

What the fields mean:

  • badge — the small pill/label text
  • headline — the main heading text
  • subtext — the supporting line under the heading
  • keyValues — the number/value shown
  • btnPrimary — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  • btnSecondary — the button's label text and link
  • floatCards — the text/value for this field
  • value — the number/value shown
  • sub — the text/value for this field
  1. Open apps2pay/section1.html and find A2P_HERO_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — floatCards. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Stats marquee section2.html Logo/stat marquee

Edit the stats array — each entry is a number (num) and label (txt).

A2P_STATS_CONFIG = {
  stats: [
    { num: "IDR 11T+", txt: "Total Processing Value"  },
    { num: "145M+",    txt: "Total Transactions"       },
    { num: "500+",     txt: "Ticketing Points"         },
    { num: "12K+",     txt: "Payment Terminals"        },
    { num: "17+",      txt: "Banking Partners"         },
    { num: "200+",     txt: "Institutions Served"      },
    { num: "25+ yrs",  txt: "Industry Experience"      },
    { num: "6M+",      txt: "Annual API Hits"          }
  ]
}

What the fields mean:

  • stats — the stat's number/value
  • txt — the label text next to the number
  1. Open apps2pay/section2.html and find A2P_STATS_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — stats. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

“Built For” chips section3.html Static markup

Edit label/title/desc and the chips list.

A2P_BUILT_CONFIG = {
  label:  "Built For",
  title:  "Who We Serve",
  desc:   "Apps2Pay is purpose-built for institutions that need reliable, scalable payment and billing infrastructure without the overhead of building it from scratch.",
  chips: [
    "🏦 Banks",
    "📱 Digital Banking Platforms",
    "🏛️ Regional Government Enterprises (BUMD)",
    "💧 Utility Companies",
    "🏪 Market Operators",
    "🌐 Enterprise Ecosystems"
  ]
}

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • desc — the paragraph/description text
  • chips — one small pill/tag label
  1. Open apps2pay/section3.html and find A2P_BUILT_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Product Suite tabs + deep dive section4.html Tabbed product explorer

Edit suiteLabel, the section heading/description, and the products array — each product has an id, tab label, icon, description and a “visual” icon/title for the detail panel.

A2P_PRODUCTS_CONFIG = {
  suiteLabel: "Apps2Pay Product Suite",

  sectionLabel: "Product Detail",
  sectionTitle: "Full Platform Overview",
  sectionDesc:  "Each Apps2Pay product is purpose-built for the institutions that rely on them — from merchant-facing POS to government billing infrastructure.",

  products: [
    {
      id:       "merchant",
      tabLabel: "💳 Merchant Apps",
      iconClass:"a2p-si-or",
      icon:     "💳",
      suiteDesc:"Payment acceptance & merchant ecosystem",

      visualIcon:  "📡",
      visualTitle: "Omni-Channel Payment Acceptance",
      visualSub:   "Every payment method in Indonesia",
      channels: ["QRIS","GPN Debit","Visa","Mastercard","Amex","UnionPay","JCB","e-Money","TapCash","Brizzi","Flazz"],

      infoLabel: "Merchant Apps",
      infoTitle: "Omni-Channel Merchant Payment Platform",
      infoDesc:  "Merchant Apps enables banks and partners to deploy a compreh
  ...
}

What the fields mean:

  • suiteLabel — the label text
  • sectionLabel — the label text
  • sectionTitle — the heading/title text
  • sectionDesc — the paragraph/description text
  • products — the text/value for this field
  • tabLabel — the label text
  • iconClass — which icon/emoji is shown
  • icon — which icon/emoji is shown
  • suiteDesc — the paragraph/description text
  • visualIcon — which icon/emoji is shown
  1. Open apps2pay/section4.html and find A2P_PRODUCTS_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — products. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Partners section5.html Static markup

Edit label/title, the categories/subCategories, and the partner logos.

A2P_PARTNERS_CONFIG = {
  label: "Trusted Partners",
  title: "Powering Indonesia's\nFinancial Infrastructure",

  categories: [
    {
      title: "Banking",
      logos: ["BRI","BNI","Mandiri","BTN","BCA","BSI","Bank Jakarta","BPD DIY","Bank Jateng","Bank Jatim","BPD Bali","Bank BJB","Bank INA","Bank Mega","Bank Maspion","Bank Neo Commerce","Bank Malukumalut"]
    },
    {
      title: "Fintech & Telco",
      logos: ["DANA","GoPay","ShopeePay","Telkomsel"],
      subCategories: [
        {
          title: "Government & Utility",
          logos: ["PDAM","Pasar Jaya","Kota Cimahi","Kab. Takalar","Telkom University","BP Batam","PELINDO"]
        }
      ]
    }
  ]
}

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • categories — the text/value for this field
  • logos — the path to the logo image
  • subCategories — the text/value for this field
  1. Open apps2pay/section5.html and find A2P_PARTNERS_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — categories, subCategories. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

How It Works (steps) section6.html Static markup

Edit label/title/desc and the steps array.

A2P_HOW_CONFIG = {
  label: "How It Works",
  title: "Live in Three Steps",
  desc:  "From integration to first transaction — minimal engineering overhead, maximum impact.",
  steps: [
    {
      num:   "01",
      title: "Connect",
      desc:  "Integrate via API, SDK, or deploy our ready-made solutions — plug into your existing banking infrastructure"
    },
    {
      num:   "02",
      title: "Configure",
      desc:  "Customize payment flows, billing rules, lifestyle products, and loyalty programs to match your business logic"
    },
    {
      num:   "03",
      title: "Collect",
      desc:  "Start processing with real-time monitoring, auto settlement, analytics dashboard, and unified reconciliation"
    }
  ]
}

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • desc — the paragraph/description text
  • steps — one step's heading and description
  1. Open apps2pay/section6.html and find A2P_HOW_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — steps. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Certs, Awards & CTA section7.html CTA banner

Edit the certs list (badge/name/detail), the awards list, and the closing cta block (description + buttons).

A2P_TRUST_CONFIG = {
  label: "Trust & Compliance",
  title: "Certified. Awarded. Trusted.",

  certs: [
    { badge: "SGS Certified",      name: "ISO 9001:2015",  detail: "Quality Management Systems"       },
    { badge: "URS / UKAS Certified", name: "ISO 27001:2022", detail: "Information Security Management" }
  ],

  awards: [
    "🏆 Infobank Top Young CEO 2025",
    "🤝 Trip.com Strategic Partnership 2024",
    "🚢 PELNI Appreciation Night 2024",
    "🏦 BCA Best Banking Sales Partner",
    "🚂 Ministry of Transport DJKA 2024",
    "📊 Infobank 200 Future Leaders 2024",
    "👔 Infobank Top 100 CEO 2023"
  ],

  cta: {
    label:   "Get Started",
    title:   "Ready to Expand Your\nDigital Financial Services?",
    desc:    "Whether you're a bank modernizing payments, a utility digitizing billing, or a fintech scaling across Southeast Asia — Apps2Pay has your stack.",
    btnPrimary:   { label: "Talk to Our
  ...
}

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • certs — the text/value for this field
  • name — the display name
  • detail — the text/value for this field
  • awards — the text/value for this field
  • cta — the button's label text and link
  • desc — the paragraph/description text
  • btnPrimary — the button's label text and link
  • href — the link this points to (a full URL, or "#" if there's no page yet)
  1. Open apps2pay/section7.html and find A2P_TRUST_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — certs. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Merchant Apps (MKPOS) /apps2pay/merchant-apps/

Product page for the MKPOS merchant application.

Banking Integration section1.html Static markup

Edit eyebrow/heading/headingAccent/subtext, the feature list, and the badges row.

MAPP_BI_CONFIG = {

  eyebrow: "Infrastructure",

  heading: "Fully Integrated with",
  headingAccent: "Banking Infrastructure",

  subtext: "Built to operate at bank-grade standards — Merchant Apps connects directly into monitoring, settlement, and terminal management systems deployed across Indonesia.",

  // ── Cards — add, remove, or reorder freely ──
  // icon options: "monitor" | "settlement" | "tms" | "sync" | "shield" | "chart"
  cards: [
    {
      icon: "monitor",
      title: "Bank-Level Monitoring & Analytics",
      desc: "Real-time dashboard gives banks full visibility into merchant transactions, terminal status, and performance metrics."
    },
    {
      icon: "settlement",
      title: "Automated Settlement",
      desc: "Auto settlement processes run end-of-day cycles without manual intervention, reducing reconciliation time and error rates."
    },
  ],

  // ── Badge strip — add or
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • heading — the heading text
  • headingAccent — the heading text
  • subtext — the supporting line under the heading
  • title — the heading/title text
  • desc — the paragraph/description text
  • badges — the small pill/label text
  1. Open apps2pay/merchant-apps/section1.html and find MAPP_BI_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — cards. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Promo Engine section2.html Static markup

Edit the heading/subtext, the media block (video or image), and the feature list.

MAPP_PE_CONFIG = {

  eyebrow: "Built-in Promo Engine",

  heading: "Bank Enablement",
  headingAccent: "for Merchant Apps",

  subtext: "MKPOS Merchant Apps enables banks and financial institutions to facilitate, manage, and scale merchant ecosystems with delivering greater control, visibility, and  scalable operations.",

  // ── Media (left column) ──
  // type: "image" | "video"
  // For video: set src to your .mp4 or .webm URL, poster to a fallback image URL
  media: {
    type: "image",
    src: "/wp-content/uploads/2026/04/MKPOS-Promo.webp",
    alt: "Promo Engine — MKPOS Merchant Apps",
    poster: ""
  },

  // ── Feature list ──
  features: [
      {
        icon: "policy",
        title: "Promo Engine Featured ",
        desc: "Centralized promo control with real-time execution across all merchant devices.",
        image: "/wp-content/uploads/2026/04/MKP-FOTO-MKPOS_4.webp"
      },
      {
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • heading — the heading text
  • headingAccent — the heading text
  • subtext — the supporting line under the heading
  • src — the text/value for this field
  • alt — the text/value for this field
  • poster — the path to the preview image
  • title — the heading/title text
  • desc — the paragraph/description text
  • image — the path to the image file
  1. Open apps2pay/merchant-apps/section2.html and find MAPP_PE_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — features. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Features & Impact section3.html Static markup

Edit the heading/subtext, the feature icons/descriptions, and the impact stat values/labels.

MAPP_FI_CONFIG = {

  eyebrow: "Feature",

  heading: "Built for Scale,",
  headingAccent: "Designed for Control",

  // ── Features (left) ──
  features: [
    {
      icon: "soundbox",
      title: "Soundbox & Card Payment",
      desc: "Empower banks to simplify merchant payment infrastructure with one integrated MKPOS, combining soundbox, card acceptance, and printing in a single, efficient solution."
    },
    {
      icon: "ecosystem",
      title: "Dynamic Promo Engine",
      desc: "Customizable promo engine enabling banks and partners to design, manage, and deploy campaigns across the ecosystem."
    },
    {
      icon: "access",
      title: "Multi-Layer Privilege Access",
      desc: "Multi-layer access framework that enables banks to define permissions and feature enablement across regions, branches, and merchants within a single ecosystem."
    }
  ],

  // ── Impact metrics (right) ──
  i
  ...
}

What the fields mean:

  • eyebrow — the small label shown above the heading
  • heading — the heading text
  • headingAccent — the heading text
  • title — the heading/title text
  • desc — the paragraph/description text
  • value — the number/value shown
  • label — the label text
  1. Open apps2pay/merchant-apps/section3.html and find MAPP_FI_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — features, impacts. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

CTA section4.html CTA banner

Edit heading/subtext and the button label/url.

MAPP_CTA_CONFIG = {

  heading: "Empower Your Merchant Ecosystem with MKP",

  subtext: "Transform your merchant network with a fully integrated, efficient, and scalable solution powered by MKP Merchant Apps & MKPOS.",

  button: {
    label: "Start Building Your Merchant Ecosystem Today",
    url: "https://wa.me/+628111608272"
  }

}

What the fields mean:

  • heading — the heading text
  • subtext — the supporting line under the heading
  • button — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  1. Open apps2pay/merchant-apps/section4.html and find MAPP_CTA_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Mint Lifestyles /apps2pay/mint-lifestyles/

Product page for the MINT Lifestyles (eSIM, cinema, PPOB, zakat) product.

Header / hero section1.html Hero banner

Check inside the <script> tag for a data array near the top; otherwise edit the visible headline/subtext directly in the HTML.

<h1>Digital essentials for everyday lifestyle.</h1>
<h3>A ready to use interface</h3>
<p>Mint Lifestyle comes with a fully designed, user friendly interface that allows instant deployment without com…</p>
  1. Open apps2pay/mint-lifestyles/section1.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

Why Choose MINT Lifestyles section2.html Static markup

No JS config — edit the feature list text directly in the HTML.

<h2>Why Choose MINT Lifestyles?</h2>
<p>We believe managing your digital life should be effortless. That's why Mint Lifestyle brings everything togeth…</p>
  1. Open apps2pay/mint-lifestyles/section2.html in a text editor.
  2. Use Find (Ctrl/Cmd+F) to search for the exact words you see on the live page (for example, text like above).
  3. Edit the text directly between the HTML tags surrounding it — no JavaScript object controls this section, so there's no array to add entries to.
  4. If you need to change an image, replace the src="..." path with a newly uploaded file's path (see Section 5 above).
  5. Save, reopen in a browser to confirm, then copy the file's contents into the matching HTML widget in Elementor, Preview, and Publish.

Lifestyle Products (sticky-scroll) section3.html Sticky-scroll carousel

Edit the array (3 entries) — same shared sticky-scroll pattern used elsewhere on the site.

MINT_LIFESTYLE_SLIDES = [
  {
      eyebrow: "Explore Mint Lifestyle Product Categories",
      title: "Entertainment",
      intro:
        "Enjoy the best of fun and leisure with Mint Lifestyle — from movie tickets and streaming subscriptions to game vouchers and digital experiences.",
      points: [
        {
          title: "Movie Tickets",
          description:
            "Book cinema tickets directly within your app — skip the queue, enjoy the show.",
        },
        {
          title: "Game Vouchers",
          description:
            "Top up your favorite games instantly with vouchers from leading gaming platforms.",
        },
        {
          title: "Streaming Subscriptions",
          description:
            "Activate or renew streaming services for music, video, and digital content in one tap.",
        },
      ],
      btnText: "Talk to Us",
      btnUrl: "https://wa.me/6288296013756",
      image:
        "/wp-content/uploads/2026/05/Aset-Website_Page-Mint-Lifestyle_Entertainment-scaled.webp",
      cardTitle: "Entertainment",
      cardDesc: "Your favorite digital entertainment, all in one place.",
    },
  {
      eyebrow: "Explore Mint Lifestyle Product Categories",
      title: "Utilities",
      intro:
        "No more juggling multiple apps for bill payments. Settle your essential utilities quickly, safely, and in one place.",
      points: [
        {
          title: "Water (PDAM)",
          description:
            "Pay your PDAM water bills on time without switching apps or visiting payment counters.",
        },
        {
          title: "Electricity (PLN)",
          description:
            "Purchase PLN token or pay monthly electricity bills instantly through Mint Lifestyle.",
        },
        {
          title: "TV & Internet",
          description:
            "Manage cable TV and internet subscriptions from multiple providers in one dashboard.",
        },
      ],
      btnText: "Talk to Us",
      btnUrl: "https://wa.me/6288296013756",
      image:
        "/wp-content/uploads/2026/05/Aset-Website_Page-Mint-Lifestyle_Utilities-scaled.webp",
      cardTitle: "Utilities",
      cardDesc: "Simplify your monthly payments with Mint Lifestyle.",
    },
  ...
]

What the fields mean:

  • eyebrow — the small label shown above the heading
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • description — the paragraph/description text
  • btnText — the button's label text and link
  • btnUrl — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open apps2pay/mint-lifestyles/section3.html and find MINT_LIFESTYLE_SLIDES near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its eyebrow text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Testimonial section4.html People carousel/grid

Edit badge/title and the slides array — star rating, quote, author name/role/initial, and photo.

MINT_TST_CONFIG = {
  badge: "Testimonial",
  title: "What People Says",
  slides: [
    {
      stars: 5,
      heading: "Transformasi digital yang luar biasa",
      text: "Lorem ipsum dolor sit amet consectetur. Gravida massa consectetur nisl cursus blandit. At quam erat viverra nisl urna dictum pulvinar viverra morbi.",
      authorInitial: "F",
      authorName: "Floyd Miles",
      authorRole: "Agen Individu",
      image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&q=80",
      imageAlt: "Floyd Miles"
    },
    {
      stars: 5,
      heading: "Platform yang sangat membantu bisnis kami",
      text: "Nunc ante egestas justo aliquam dignissim netus quisque volutpat. Viverra erat egestas ut quisque consequat egestas ipsum malesuada imperdiet.",
      authorInitial: "S",
      authorName: "Sarah Chen",
      authorRole: "Branch Manager, BPR Mitra",
      image: "https://images
  ...
}

What the fields mean:

  • badge — the small pill/label text
  • title — the heading/title text
  • slides — the text/value for this field
  • heading — the heading text
  • text — the text/value for this field
  • authorInitial — the text/value for this field
  • authorName — the display name
  • authorRole — the job title / role
  • image — the path to the image file
  • imageAlt — the path to the image file
  1. Open apps2pay/mint-lifestyles/section4.html and find MINT_TST_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — slides. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

CTA banner section5.html CTA banner

Edit heading/subtext, the button label/link, and the background image.

MINT_CTA_CONFIG = {
  heading: "Ready to integrate eSIM and lifestyle solutions into your platform?",
  subtext: "Start your partnership with MINT Lifestyle today.",
  buttonLabel: "Contact Our Team",
  buttonHref: "https://wa.me/+628111608272",
  backgroundImage: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&q=80"
}

What the fields mean:

  • heading — the heading text
  • subtext — the supporting line under the heading
  • buttonLabel — the label text
  • buttonHref — the link this points to (a full URL, or "#" if there's no page yet)
  • backgroundImage — the path to the background image
  1. Open apps2pay/mint-lifestyles/section5.html and find MINT_CTA_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

FAQ section6.html FAQ accordion

Edit badge/title and the items list (question/answer, plus whether it's open by default).

MINT_FAQ_CONFIG = {
  badge: "FAQ",
  title: "Common Question",
  // Set image to "" to show a placeholder instead
  image: "https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&q=80",
  imageAlt: "FAQ",
  items: [
    {
      question: "What is MINT Lifestyle?",
      answer: "MINT Lifestyle is embedded digital platform by MKP that offers a curated inventory of non-travel lifestyle services, to allow banks, fintechs, digital institutions to integrate and launch new services instantly, without additional development.",
      openByDefault: true
    },
    {
      question: "What services are available on MINT Lifestyle?",
      answer: "MINT Lifestyle offers a range of non travel product services including bill payments, top-ups, merchant transactions, and other digital services—designed to simplify everyday activities within a single platform.",
      openByDefault: false
    },
    {
      qu
  ...
}

What the fields mean:

  • badge — the small pill/label text
  • title — the heading/title text
  • imageAlt — the path to the image file
  • items — the text/value for this field
  • answer — the text/value for this field
  • openByDefault — the text/value for this field
  1. Open apps2pay/mint-lifestyles/section6.html and find MINT_FAQ_CONFIG near the top of the <script> section.
  2. Change whichever field's text you want between the quotes — see the field meanings below.
  3. This object also contains list(s) inside it — items. To add a new entry to one of those, find that list, copy one of its existing { ... } blocks, paste it right after the last one (add a comma between entries), then edit each field.
  4. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Billing Management System /billing-management-system/

Product page for the government/utility billing management system.

Feature slides (sticky-scroll) section1.html Sticky-scroll carousel

Edit the SLIDES array (3 entries) — same shared pattern used across the product pages.

SLIDES = [
  {
    label: "Our Solutions",
    title: "Integrated Digital University Ecosystem",
    intro: "A Unified Billing and Payment Platform for Modern Universities",
    points: [
      {
        title: "One centralized dashboard to monitor all university transactions",
        description: "Real-time transaction tracking and automated reconciliation"
      },
      {
        title: "Integrated billing management System",
        description: "A unified billing and payment layer connecting academic, facility, and retail transactions across campus."
      },
      {
        title: "Multi-payment support: debit, credit, and QRIS",
        description: "Cashless payments across the campus ecosystem"
      }
    ],
    btnPrimary: { text: "Explore More", url: "https://wa.me/+628111608272" },
    image: "/wp-content/uploads/2026/04/Aset-Website_Page-MKP-Mobile_Student-Billing-scaled.webp",
    cardTitle: "Integrated Digital University Ecosystem",
    cardDesc: "A Unified Billing and Payment Platform for Modern Universities"
  },
  {
    label: "Our Solutions",
    title: "PDAM Billing",
    intro: "A comprehensive digital solution integrated directly with the core PDAM system to manage customer billing and omnichannel payment.",
    points: [
      {
        title: "Cashless water bill payments across multiple channels",
        description: "Omnichannel integration: banking apps, digital wallets, and PDAM website"
      },
      {
        title: "Direct integration with core PDAM billing and accounting systems",
        description: "Reduces manual processes and cash handling"
      },
      {
        title: "Centralized dashboard for reporting and operational control",
        description: "Real-time transaction monitoring and automated reconciliation"
      }
    ],
    btnPrimary: { text: "Explore More", url: "https://wa.me/+628111608272" },
    image: "/wp-content/uploads/2026/04/Aset-Website_Page-MKP-Mobile_Billing-PDAM-scaled.webp",
    cardTitle: "PDAM Billing",
    cardDesc: "Integrated omnichannel billing for water utilities"
  },
  ...
]

What the fields mean:

  • label — the label text
  • title — the heading/title text
  • intro — the intro paragraph
  • points — one bullet line
  • description — the paragraph/description text
  • btnPrimary — the button's label text and link
  • url — the link this points to (a full URL, or "#" if there's no page yet)
  • image — the path to the image file
  • cardTitle — the heading/title text
  • cardDesc — the paragraph/description text
  1. Open billing-management-system/section1.html and find SLIDES near the top of the <script> section.
  2. To edit an existing entry: find it in the list (search for its label text), then change whichever field's text is between the quotes.
  3. To add a new entry: copy one of the existing { ... } blocks in the list, paste it right after the last one (don't forget a comma between entries), then edit each field.
  4. If a field is an image or video path, upload the file first via Media → Add New in wp-admin and use its file path (see Section 5 above).
  5. Save the file, reopen it in a browser to confirm it looks right, then copy the whole file's contents into the matching HTML widget in Elementor, click Preview Changes, and Publish.

Special note: the Use Cases page /use_case/

This page isn't included above because it has no HTML widgets to extract — its case-study grid is generated by a Shortcode widget, meaning the content comes from PHP code registered elsewhere (most likely the Snippets menu in wp-admin, or the theme's functions file), not an editable content list like the blocks above. Changing this page's content requires WordPress/PHP development knowledge — a developer should check the Snippets menu first to locate the shortcode's source.

9. Safe-Editing Checklist