{"id":59284,"date":"2026-06-29T13:50:05","date_gmt":"2026-06-29T13:50:05","guid":{"rendered":"https:\/\/web-design-company.site\/apps\/jewelry\/?page_id=59284"},"modified":"2026-07-03T12:23:28","modified_gmt":"2026-07-03T12:23:28","slug":"keyideas-visual-configurator","status":"publish","type":"page","link":"https:\/\/web-design-company.site\/apps\/jewelry\/keyideas-visual-configurator\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Keyideas Visual Configurator<\/title>\n\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root {\n      \/* Palette matched to the live product page: white surface, near-black ink,\n         a single black CTA color, and a thin neutral border \u2014 no cream\/serif boutique styling. *\/\n      --bg: #ffffff;\n      --surface: #ffffff;\n      --soft: #f7f7f7;\n      --ink: #1a1a1a;\n      --muted: #6e6e6e;\n      --line: #e2e2e2;\n      --line-soft: rgba(26, 26, 26, 0.10);\n      --accent: #1a1a1a;\n      --accent-strong: #000000;\n      --accent-soft: #1a1a1a;\n      --blue: #5433eb;\n      --shadow: 0 18px 46px rgba(0, 0, 0, 0.08);\n      --serif: \"Poppins\", Arial, sans-serif;\n      --sans: \"Inter\", Arial, sans-serif;\n    }\n\n    * {\n      box-sizing: border-box;\n    }\n\n    html {\n      scroll-behavior: smooth;\n    }\n\n    body {\n      margin: 0;\n      background: var(--bg);\n    }\n\n    .kvc {\n      min-height: 100vh;\n      overflow-x: hidden;\n      background: var(--bg);\n      color: var(--ink);\n      font-family: var(--sans);\n      letter-spacing: 0;\n    }\n\n    .kvc a {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    .kvc button {\n      font: inherit;\n      cursor: pointer;\n    }\n\n    .wrap {\n      width: min(100% - 40px, 1240px);\n      margin: 0 auto;\n    }\n\n    .eyebrow {\n      color: var(--muted);\n      font-size: 0.72rem;\n      font-weight: 700;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n\n    .button,\n    .button-ghost,\n    .product-button,\n    .copy-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 46px;\n      border: 1px solid var(--ink);\n      border-radius: 2px;\n      color:white !important;\n      transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, color 170ms ease;\n    }\n\n    .hero {\n      padding: clamp(34px, 6vw, 72px) 0 0;\n      background: var(--bg);\n      border-bottom: 1px solid var(--line);\n    }\n\n    .hero-layout {\n      display: grid;\n      grid-template-columns: minmax(360px, 0.52fr) minmax(440px, 0.48fr);\n      gap: clamp(34px, 4.5vw, 64px);\n      align-items: center;\n      min-height: calc(100svh - 72px);\n      padding-bottom: clamp(34px, 5vw, 68px);\n    }\n\n    .hero-copy {\n      animation: enterUp 640ms ease both;\n    }\n\n    .hero h1 {\n      max-width: 640px;\n      margin: 16px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(2.6rem, 4.6vw, 4.2rem);\n      font-weight: 700;\n      line-height: 1.04;\n      letter-spacing: -0.01em;\n    }\n\n    .hero h1 span {\n      display: block;\n    }\n\n    .hero p {\n      max-width: 540px;\n      margin: 20px 0 0;\n      color: var(--muted);\n      font-size: clamp(0.95rem, 1.3vw, 1.05rem);\n      line-height: 1.72;\n    }\n\n    .actions {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-top: 30px;\n    }\n\n    .button,\n    .button-ghost {\n      padding: 0 24px;\n      font-size: 0.76rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .button {\n      color: #ffffff;\n      background: var(--accent-strong);\n      border-color: var(--accent-strong);\n    }\n\n    .button-ghost {\n      color: #ffffff;\n      background: var(--blue);\n      border-color: var(--blue);\n    }\n\n    .viewer-shell {\n      position: relative;\n      display: grid;\n      gap: 12px;\n      animation: enterUp 720ms ease 100ms both;\n    }\n\n    .viewer-frame {\n      position: relative;\n      min-height: clamp(420px, 47vw, 620px);\n      overflow: hidden;\n      background: #ffffff;\n      border: 1px solid var(--line);\n      box-shadow: var(--shadow);\n      isolation: isolate;\n    }\n\n    .viewer-frame iframe {\n      display: block;\n      width: 100%;\n      height: clamp(420px, 47vw, 620px);\n      border: 0;\n      background: #ffffff;\n    }\n\n    .viewer-note {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 18px;\n      color: var(--muted);\n      font-size: 0.78rem;\n      font-weight: 600;\n      line-height: 1.45;\n    }\n\n    .viewer-note strong {\n      color: var(--ink);\n      font-size: 0.72rem;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n\n    .availability {\n      display: grid;\n      grid-template-columns: 1.05fr repeat(3, minmax(0, 1fr));\n      border-top: 1px solid var(--line);\n      border-bottom: 1px solid var(--line);\n      background: var(--soft);\n    }\n\n    .availability div {\n      min-height: 94px;\n      padding: 18px 22px;\n      border-right: 1px solid var(--line);\n    }\n\n    .availability div:last-child {\n      border-right: 0;\n    }\n\n    .availability strong {\n      display: block;\n      margin-bottom: 8px;\n      font-size: 0.92rem;\n      font-weight: 700;\n    }\n\n    .availability span {\n      display: block;\n      color: var(--muted);\n      font-size: 0.82rem;\n      line-height: 1.55;\n    }\n\n    .section {\n      padding: clamp(56px, 7vw, 100px) 0;\n    }\n\n    .section-head {\n      display: grid;\n      grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.5fr);\n      gap: clamp(26px, 5vw, 70px);\n      align-items: end;\n      margin-bottom: clamp(28px, 5vw, 50px);\n    }\n\n    .section-head h2 {\n      margin: 10px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(1.9rem, 3.4vw, 3rem);\n      font-weight: 700;\n      line-height: 1.08;\n      letter-spacing: -0.01em;\n    }\n\n    .section-head p {\n      margin: 0;\n      color: var(--muted);\n      line-height: 1.72;\n    }\n\n    .products {\n      background: #ffffff;\n    }\n\n    .product-list {\n      display: grid;\n      border-top: 1px solid var(--line);\n    }\n\n    .product-row {\n      display: grid;\n      grid-template-columns: 0.55fr 1fr auto;\n      gap: 24px;\n      align-items: center;\n      min-height: 132px;\n      padding: 26px 0;\n      border-bottom: 1px solid var(--line);\n    }\n\n    .product-row h3 {\n      margin: 0;\n      font-family: var(--serif);\n      font-size: clamp(1.3rem, 2.2vw, 1.9rem);\n      font-weight: 600;\n      line-height: 1.2;\n    }\n\n    .product-row p {\n      max-width: 540px;\n      margin: 0;\n      color: var(--muted);\n      line-height: 1.62;\n    }\n\n    .product-tags {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-top: 12px;\n    }\n\n    .product-tags span,\n    .status-pill {\n      display: inline-flex;\n      align-items: center;\n      min-height: 26px;\n      padding: 0 10px;\n      border: 1px solid var(--line);\n      border-radius: 2px;\n      color: var(--muted);\n      font-size: 0.66rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .product-button {\n      min-width: 108px;\n      padding: 0 18px;\n      color: #ffffff;\n      background: var(--accent-strong);\n      border-color: var(--accent-strong);\n      font-size: 0.72rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      white-space: nowrap;\n    }\n\n    .product-row.is-active .status-pill {\n      color: var(--blue);\n      border-color: rgba(84, 51, 235, 0.35);\n      background: rgba(84, 51, 235, 0.08);\n    }\n\n    .config {\n      background: var(--soft);\n    }\n\n    .config-layout {\n      display: grid;\n      grid-template-columns: minmax(0, 0.86fr) minmax(330px, 0.44fr);\n      gap: clamp(28px, 5vw, 68px);\n      align-items: start;\n    }\n\n    .config-viewer {\n      display: grid;\n      gap: 14px;\n    }\n\n    .config-viewer .viewer-frame {\n      min-height: clamp(460px, 48vw, 620px);\n    }\n\n    .config-viewer iframe {\n      height: clamp(460px, 48vw, 620px);\n    }\n\n    .config-copy {\n      position: sticky;\n      top: 98px;\n      display: grid;\n      gap: 20px;\n      padding-top: 8px;\n    }\n\n    .config-title {\n      margin: 10px 0 0;\n      font-family: var(--serif);\n      font-size: clamp(1.8rem, 2.8vw, 2.6rem);\n      font-weight: 700;\n      line-height: 1.14;\n      letter-spacing: -0.01em;\n    }\n\n    .fact-list {\n      display: grid;\n      border-top: 1px solid var(--line);\n    }\n\n    .fact {\n      display: grid;\n      gap: 7px;\n      padding: 18px 0;\n      border-bottom: 1px solid var(--line);\n    }\n\n    .fact strong {\n      font-size: 0.88rem;\n      font-weight: 700;\n    }\n\n    .fact span {\n      color: var(--muted);\n      font-size: 0.88rem;\n      line-height: 1.58;\n      word-break: break-word;\n    }\n\n    .platform {\n      background: #ffffff;\n    }\n\n    .feature-grid {\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 1px;\n      background: var(--line);\n      border: 1px solid var(--line);\n    }\n\n    .feature {\n      min-height: 250px;\n      padding: 24px;\n      background: #ffffff;\n    }\n\n    .feature strong {\n      color: var(--blue);\n      font-size: 0.7rem;\n      font-weight: 700;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n\n    .feature h3 {\n      margin: 44px 0 10px;\n      font-size: 1.05rem;\n      font-weight: 700;\n      line-height: 1.25;\n    }\n\n    .feature p {\n      margin: 0;\n      color: var(--muted);\n      font-size: 0.88rem;\n      line-height: 1.62;\n    }\n\n    .embed {\n      background: var(--soft);\n    }\n\n    .embed-layout {\n      display: grid;\n      grid-template-columns: minmax(0, 0.68fr) minmax(340px, 0.54fr);\n      gap: clamp(28px, 6vw, 76px);\n      align-items: start;\n    }\n\n    .code-panel {\n      display: grid;\n      gap: 18px;\n      padding: 24px;\n      background: #ffffff;\n      border: 1px solid var(--line);\n      box-shadow: var(--shadow);\n    }\n\n    .code-panel h3 {\n      margin: 0;\n      font-size: 0.98rem;\n      font-weight: 700;\n    }\n\n    .code-panel pre {\n      margin: 0;\n      overflow-x: auto;\n      color: #3a3a3a;\n      font-size: 0.8rem;\n      line-height: 1.72;\n      white-space: pre-wrap;\n    }\n\n    .copy-button {\n      justify-self: start;\n      padding: 0 16px;\n      color: #ffffff;\n      background: var(--blue);\n      border-color: var(--blue);\n      font-size: 0.7rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    .final {\n      padding: clamp(64px, 9vw, 116px) 0;\n      background: #ffffff;\n      border-top: 1px solid var(--line);\n    }\n\n    .final h2 {\n      max-width: 820px;\n      margin: 0;\n      font-family: var(--serif);\n      font-size: clamp(2rem, 4.4vw, 3.6rem);\n      font-weight: 700;\n      line-height: 1.08;\n      letter-spacing: -0.01em;\n    }\n\n    .final p {\n      max-width: 590px;\n      margin: 22px 0 0;\n      color: var(--muted);\n      line-height: 1.7;\n    }\n\n    .reveal {\n      opacity: 0;\n      transform: translateY(22px);\n      transition: opacity 560ms ease, transform 560ms ease;\n    }\n\n    .reveal.visible {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    .button:hover,\n    .button-ghost:hover,\n    .product-button:hover,\n    .copy-button:hover {\n      transform: translateY(-2px);\n    }\n\n    .kvc button:focus-visible,\n    .kvc a:focus-visible {\n      outline: 2px solid var(--ink);\n      outline-offset: 4px;\n    }\n\n    @keyframes enterUp {\n      from {\n        opacity: 0;\n        transform: translateY(24px);\n      }\n\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    @media (max-width: 1060px) {\n      .hero-layout,\n      .section-head,\n      .config-layout,\n      .embed-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .hero-layout {\n        min-height: auto;\n      }\n\n      .hero h1 {\n        max-width: 680px;\n      }\n\n      .availability {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      .availability div:nth-child(2n) {\n        border-right: 0;\n      }\n\n      .product-row {\n        grid-template-columns: 1fr;\n        gap: 14px;\n      }\n\n      .product-button {\n        width: fit-content;\n      }\n\n      .config-copy {\n        position: static;\n      }\n\n      .feature-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n    }\n\n    @media (max-width: 660px) {\n      .wrap {\n        width: min(100% - 24px, 1240px);\n      }\n\n      .hero {\n        padding-top: 28px;\n      }\n\n      .hero h1 {\n        font-size: clamp(2.2rem, 9vw, 3rem);\n      }\n\n      .actions {\n        display: grid;\n      }\n\n      .button,\n      .button-ghost {\n        width: 100%;\n      }\n\n      .viewer-frame,\n      .viewer-frame iframe,\n      .config-viewer .viewer-frame,\n      .config-viewer iframe {\n        min-height: 520px;\n        height: 520px;\n      }\n\n      .viewer-note {\n        display: grid;\n      }\n\n      .availability,\n      .feature-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .availability div {\n        border-right: 0;\n      }\n\n      .section {\n        padding: 58px 0;\n      }\n\n      .feature {\n        min-height: 220px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      *,\n      *::before,\n      *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        scroll-behavior: auto !important;\n        transition-duration: 0.01ms !important;\n      }\n    }\n\n     \/* \u2500\u2500 Platform section \u2500\u2500 *\/\n    .platform-bg { background: #ffffff; }\n\n    .platform-grid {\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 1px;\n      background: var(--line);\n      border: 1px solid var(--line);\n      box-shadow: none;\n    }\n\n    .platform-card {\n      min-height: 250px;\n      padding: 28px 24px;\n      background: var(--surface);\n      transition: background 200ms ease;\n    }\n\n    .platform-card:hover { background: var(--surface-light); }\n\n    .platform-card .card-label {\n      color: var(--accent);\n      font-size: 0.7rem;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n    }\n\n    .platform-card h3 {\n      margin: 44px 0 12px;\n      font-family: var(--serif);\n      font-size: 1.2rem;\n      font-weight: 600;\n      line-height: 1.25;\n      color: var(--ink);\n    }\n\n    .platform-card p {\n      margin: 0;\n      color: var(--muted);\n      font-size: 0.88rem;\n      line-height: 1.62;\n      font-weight: 400;\n    }\n\n    .custom {\n      width: 350px;\n    }\n\n   \n      @media (max-width: 660px) {\n        .custom {\n          width: 383px;\n        }\n      }\n  <\/style>\n\n\n  <main class=\"kvc\" data-viewer-url=\"https:\/\/keyideas-visual-configurator.apps.keyideasglobal.com\/?clientId=ki-kvc-mr3g2d4t-4946a1923079f860&amp;ring=celeste-trio&amp;panel=true\">\n    <section class=\"hero\" id=\"top\">\n      <div class=\"wrap hero-layout\">\n        <div class=\"hero-copy\">\n          <span class=\"eyebrow\">Available on selected rings only<\/span>\n          <h1><span>Keyideas Visual<\/span><span>Configurator<\/span><\/h1>\n          <p>\n            Let shoppers inspect supported rings in a live 3D viewer. The configurator is currently enabled for three products while more ring models are prepared for the KVC platform.\n          <\/p>\n          <div class=\"actions\">\n            <a class=\"button-ghost custom\" href=\"#products\">View Supported Ring<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"viewer-shell\" aria-label=\"Live Keyideas KVC viewer\">\n          <div class=\"viewer-frame\">\n            <iframe src=\"https:\/\/keyideas-visual-configurator.apps.keyideasglobal.com\/?clientId=ki-kvc-mr3g2d4t-4946a1923079f860&#038;ring=celeste-trio&#038;size=500&#038;mode=both\" title=\"Keyideas Visual Configurator live KVC viewer\" loading=\"lazy\" allowfullscreen=\"\">\n            <\/iframe>\n          <\/div>\n          <div class=\"viewer-note\">\n            <span>This is the live KVC iframe, not a static product image.<\/span>\n            <strong id=\"active-ring-label\">Celeste Trio selected<\/strong>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"availability\" aria-label=\"Currently supported KVC products\">\n        <div>\n          <strong>Currently available<\/strong>\n          <span>Keyideas Visual Configurator is shown only for the supported products below.<\/span>\n        <\/div>\n        <div>\n          <strong>Celeste Trio<\/strong>\n          <span>KVC  enabled product experience.<\/span>\n        <\/div>\n        <div>\n          <strong>Eclipse Glow<\/strong>\n          <span>KVC enabled product experience.<\/span>\n        <\/div>\n        <div>\n          <strong>Signature Solitaire<\/strong>\n          <span>KVC enabled product experience.<\/span>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"section products\" id=\"products\">\n      <div class=\"wrap\">\n        <div class=\"section-head reveal\">\n          <div>\n            <span class=\"eyebrow\">Supported products<\/span>\n            <h2>Following rings are available to view now.<\/h2>\n          <\/div>\n          <p>\n            The page should not show unsupported products as configurable. These options point shoppers to the same live KVC viewer while the product selection tells them which design is currently available.\n          <\/p>\n        <\/div>\n\n        <div class=\"product-list\">\n          <article class=\"product-row is-active reveal\" data-product=\"Eclipse Glow\">\n            <div>\n              <span class=\"status-pill\">KVC available<\/span>\n              <h3>Celeste Trio<\/h3>\n            <\/div>\n            <div>\n              <p>A delicate and versatile piece designed to complement your unique, personal style. Perfect for layering or wearing solo, its understated elegance makes it a stunning staple for any jewelry collection.\n\nImages and videos are presented with a 3-carat center diamond for re<\/p>\n              <div class=\"product-tags\" aria-label=\"Supported configurator options\">\n                <span>3D viewer<\/span>\n                <span>Metal<\/span>\n                <span>Shape<\/span>\n              <\/div>\n            <\/div>\n          <a href=\"https:\/\/web-design-company.site\/apps\/jewelry\/product\/celeste-trio\/\"> <button class=\"product-button\" type=\"button\" data-product-button=\"Eclipse Glow\">Open<\/button><\/a> \n          <\/article>\n            <article class=\"product-row is-active reveal\" data-product=\"Signature Solitaire\">\n            <div>\n              <span class=\"status-pill\">KVC available<\/span>\n              <h3>Eclipse Glow<\/h3>\n            <\/div>\n            <div>\n              <p>An epitomizes modern elegance, crafted with premium alloys and sparkling stones for a radiant finish. It is the perfect everyday accessory to add a touch of sophisticated brilliance to both casual and formal ensembles.<\/p>\n              <div class=\"product-tags\" aria-label=\"Supported configurator options\">\n                <span>3D viewer<\/span>\n                <span>Metal<\/span>\n                <span>Shape<\/span>\n              <\/div>\n            <\/div>\n          <a href=\"https:\/\/web-design-company.site\/apps\/jewelry\/product\/eclipse-glow\/\"> <button class=\"product-button\" type=\"button\" data-product-button=\"Signature Solitaire\">Open<\/button><\/a> \n          <\/article>\n            <article class=\"product-row is-active reveal\" data-product=\"Signature Solitaire\">\n            <div>\n              <span class=\"status-pill\">KVC available<\/span>\n              <h3>Signature Solitaire<\/h3>\n            <\/div>\n            <div>\n              <p>A brilliantly designed piece that merges sleek modernity with a warm, inviting glow. Crafted to be a striking focal point, it effortlessly enhances the ambiance of any contemporary room.<\/p>\n              <div class=\"product-tags\" aria-label=\"Supported configurator options\">\n                <span>3D viewer<\/span>\n                <span>Metal<\/span>\n                <span>Shape<\/span>\n              <\/div>\n            <\/div>\n          <a href=\"https:\/\/web-design-company.site\/apps\/jewelry\/product\/signature-solitaire\/\"> <button class=\"product-button\" type=\"button\" data-product-button=\"The Belmont\">Open<\/button><\/a> \n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"section config\" id=\"viewer\">\n      <div class=\"wrap config-layout\">\n        <div class=\"config-viewer reveal\" aria-label=\"Embedded visual configurator\">\n          <div class=\"viewer-frame\">\n            <iframe src=\"https:\/\/keyideas-visual-configurator.apps.keyideasglobal.com\/?clientId=ki-kvc-mr3g2d4t-4946a1923079f860&amp;ring=celeste-trio&amp;panel=true\" title=\"Embedded Keyideas Visual Configurator\" loading=\"lazy\" allowfullscreen=\"\">\n            <\/iframe>\n          <\/div>\n          <div class=\"viewer-note\">\n            <span>Rendered from the live KVC URL supplied for this project.<\/span>\n            <strong>Panel mode enabled<\/strong>\n          <\/div>\n        <\/div>\n\n        <aside class=\"config-copy reveal\">\n          <div>\n            <span class=\"eyebrow\">Live viewer<\/span>\n            <h2 class=\"config-title\">The iframe is the product visual.<\/h2>\n          <\/div>\n          <p style=\"margin: 0; color: var(--muted); line-height: 1.7;\">\n            Static ring images have been removed. The page now uses the KVC app itself as the visual anchor so shoppers see the same configurable experience they will interact with.\n          <\/p>\n          <div class=\"fact-list\">\n            <div class=\"fact\">\n              <strong>URL rendered<\/strong>\n              <span>https:\/\/keyideas-visual-configurator.apps.keyideasglobal.com\/?clientId=your-client-id&amp;ring=celeste-trio&amp;panel=true<\/span>\n            <\/div>\n            <div class=\"fact\">\n              <strong>Current availability<\/strong>\n              <span>Celeste Trio<\/span>\n               <span>Eclipse Glow<\/span>\n                <span>Signature Solitaire<\/span>\n            <\/div>\n            <div class=\"fact\">\n              <strong>WordPress ready<\/strong>\n              <span>All CSS and JavaScript remain inside this single root index.html file.<\/span>\n            <\/div>\n          <\/div>\n          <a class=\"button\" href=\"https:\/\/keyideas-visual-configurator.apps.keyideasglobal.com\/?clientId=ki-kvc-mr3g2d4t-4946a1923079f860&amp;ring=celeste-trio&amp;panel=true\" target=\"_blank\" rel=\"noopener\">View Demo<\/a>\n        <\/aside>\n      <\/div>\n    <\/section>\n\n    <section class=\"section platform\" id=\"platform\">\n      <div class=\"wrap\">\n        <div class=\"section-head reveal\">\n          <div>\n            <span class=\"eyebrow\">Platform capability<\/span>\n            <h2>Built for controlled product expansion.<\/h2>\n          <\/div>\n          <p>\n            The KVC project validates access before rendering models and keeps model delivery private, so the public page can stay focused on products that are actually ready.\n          <\/p>\n        <\/div>\n\n        <div class=\"feature-grid\">\n          <article class=\"feature reveal\">\n            <strong>01<\/strong>\n            <h3>3D ring viewer<\/h3>\n            <p>Three.js rendering with configurator panel support for supported ring models.<\/p>\n          <\/article>\n          <article class=\"feature reveal\">\n            <strong>02<\/strong>\n            <h3>Protected models<\/h3>\n            <p>Private GLB files load only after client, ring, domain, expiry, and token checks.<\/p>\n          <\/article>\n          <article class=\"feature reveal\">\n            <strong>03<\/strong>\n            <h3>Storefront library<\/h3>\n            <p>The Keyideas embed library mounts the viewer and syncs product fields from WordPress pages.<\/p>\n          <\/article>\n          <article class=\"feature reveal\">\n            <strong>04<\/strong>\n            <h3>Admin workflow<\/h3>\n            <p>More products can be added once model folders and client assignments are ready.<\/p>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"section embed\" id=\"embed\">\n      <div class=\"wrap embed-layout\">\n        <div class=\"reveal\">\n          <span class=\"eyebrow\">WordPress library integration<\/span>\n          <div class=\"section-head\" style=\"display: block; margin-bottom: 0;\">\n            <h2>Use the Keyideas embed library.<\/h2>\n            <p style=\"max-width: 620px; margin-top: 22px;\">\n              The WordPress product page should load the Keyideas KVC client script. The library mounts the viewer into the target element and keeps it synced with shape and metal fields on the page.\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <aside class=\"code-panel reveal\" aria-label=\"Keyideas KVC library embed code\">\n          <h3>Embed library reference<\/h3>\n          <pre id=\"embed-code\">&lt;select class=\"ki_kvc_shape\"&gt;\n  &lt;option value=\"round\"&gt;Round&lt;\/option&gt;\n  &lt;option value=\"oval\"&gt;Oval&lt;\/option&gt;\n  &lt;option value=\"emerald\"&gt;Emerald&lt;\/option&gt;\n&lt;\/select&gt;\n\n&lt;select class=\"ki_kvc_metal\"&gt;\n  &lt;option value=\"white-gold\"&gt;White Gold&lt;\/option&gt;\n  &lt;option value=\"yellow-gold\"&gt;Yellow Gold&lt;\/option&gt;\n  &lt;option value=\"rose-gold\"&gt;Rose Gold&lt;\/option&gt;\n&lt;\/select&gt;\n\n&lt;div id=\"ki-kvc-frame\"&gt;&lt;\/div&gt;\n\n&lt;script src=\"https:\/\/keyideas-visual-configurator.apps.keyideasglobal.com\/?clientId=your-client-id&amp;ring=celeste-trio&amp;size=520&amp;height=520\"&gt;&lt;\/script&gt;<\/pre>\n          <button class=\"copy-button\" type=\"button\" data-copy=\"#embed-code\">Copy Code<\/button>\n        <\/aside>\n      <\/div>\n    <\/section>\n     <!-- \u2500\u2500 PLATFORM INTEGRATIONS \u2500\u2500 -->\n  <section class=\"section platform-bg\" id=\"platforms\">\n    <div class=\"wrap\">\n      <div class=\"section-head reveal\">\n        <div>\n          <span class=\"eyebrow\">Platform integrations<\/span>\n          <h2>Works with <span class=\"gradient\">any store platform.<\/span><\/h2>\n        <\/div>\n        <p>\n          Vizora integrates with the platform your jewelry store already uses. No migration or rebuild required &#8211; the try-on experience connects to your existing catalog and product pages.\n        <\/p>\n      <\/div>\n\n      <div class=\"platform-grid\">\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Native app<\/span>\n          <h3>Shopify<\/h3>\n          <p>Published Shopify app. Install in one click, no theme modifications, compatible with all Shopify 2.0 themes.<\/p>\n        <\/article>\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Plugin<\/span>\n          <h3>WooCommerce<\/h3>\n          <p>Hosted try-on experience connected to your WooCommerce product catalog through the Vizora API.<\/p>\n        <\/article>\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Integration<\/span>\n          <h3>BigCommerce &amp; Magento<\/h3>\n          <p>Full API integration for BigCommerce, Magento, and Adobe Commerce stores without any platform migration.<\/p>\n        <\/article>\n        <article class=\"platform-card reveal\">\n          <span class=\"card-label\">Custom build<\/span>\n          <h3>Custom Stacks: Laravel, React, &#038; Angular<\/h3>\n          <p>Stores built on Laravel, React, Angular, or fully custom backends can integrate the Vizora try-on engine directly via full API access.<\/p>\n        <\/article>\n      <\/div>\n\n    <\/div>\n  <\/section>\n    <section class=\"final\">\n      <div class=\"wrap reveal\">\n        <span class=\"eyebrow\">Limited KVC launch<\/span>\n        <h2>Show the configurator only where the experience is ready.<\/h2>\n        <p>\n          Keep the public page white, clean, and focused on the supported products. As more model assets are prepared, the same layout can add new KVC-enabled rings without changing the core embed.\n        <\/p>\n        <div class=\"actions\">\n          <a class=\"button-ghost\" href=\"#products\">Review Supported Rings<\/a>\n   \n        <\/div>\n      <\/div>\n    <\/section>\n  <\/main>\n\n  <script>\n    (function () {\n      var root = document.querySelector(\".kvc\");\n      if (!root) return;\n\n      var activeLabel = document.getElementById(\"active-ring-label\");\n      var rows = Array.prototype.slice.call(root.querySelectorAll(\".product-row\"));\n\n      root.querySelectorAll(\"[data-copy]\").forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          var target = document.querySelector(button.getAttribute(\"data-copy\"));\n          if (!target) return;\n          navigator.clipboard.writeText(target.textContent).then(function () {\n            var original = button.textContent;\n            button.textContent = \"Copied\";\n            window.setTimeout(function () {\n              button.textContent = original;\n            }, 1400);\n          });\n        });\n      });\n\n      var revealItems = root.querySelectorAll(\".reveal\");\n      if (\"IntersectionObserver\" in window) {\n        var observer = new IntersectionObserver(function (entries) {\n          entries.forEach(function (entry) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add(\"visible\");\n              observer.unobserve(entry.target);\n            }\n          });\n        }, { threshold: 0.14 });\n\n        revealItems.forEach(function (item) {\n          observer.observe(item);\n        });\n      } else {\n        revealItems.forEach(function (item) {\n          item.classList.add(\"visible\");\n        });\n      }\n    })();\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Keyideas Visual Configurator Available on selected rings only Keyideas VisualConfigurator Let shoppers inspect supported rings in a live 3D viewer. The configurator is currently enabled for three products while more ring models are prepared for the KVC platform. View Supported Ring This is the live KVC iframe, not a static product image. Celeste Trio selected [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-59284","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages\/59284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/comments?post=59284"}],"version-history":[{"count":7,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages\/59284\/revisions"}],"predecessor-version":[{"id":59580,"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/pages\/59284\/revisions\/59580"}],"wp:attachment":[{"href":"https:\/\/web-design-company.site\/apps\/jewelry\/wp-json\/wp\/v2\/media?parent=59284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}