{"id":74,"date":"2026-04-05T23:30:21","date_gmt":"2026-04-05T23:30:21","guid":{"rendered":"https:\/\/dev.koin.locker\/swap26\/?page_id=74"},"modified":"2026-04-05T23:44:38","modified_gmt":"2026-04-05T23:44:38","slug":"version-2-6","status":"publish","type":"page","link":"https:\/\/dev.koin.locker\/swap26\/version-2-6\/","title":{"rendered":"Version 2.6"},"content":{"rendered":"<style>.elementor-74 .elementor-element.elementor-element-691ae9a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-ff4cd7f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-16bef52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-fe7be8a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-0c419a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-7b23c8c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-7f0b7e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-8eb389b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-44c7d54{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-74 .elementor-element.elementor-element-b884c88{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-e65fcf2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-f6b2fdc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-74 .elementor-element.elementor-element-9b32924{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-74 .elementor-element.elementor-element-55c5a6b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"74\" class=\"elementor elementor-74\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-691ae9a e-flex e-con-boxed e-con e-parent\" data-id=\"691ae9a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eecd209 elementor-widget elementor-widget-heading\" data-id=\"eecd209\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Full v2.6 Blueprint: \"The Atomic Overhaul\"<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef78bf4 elementor-widget elementor-widget-text-editor\" data-id=\"ef78bf4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 data-path-to-node=\"4\"><b data-path-to-node=\"4\" data-index-in-node=\"0\">Phase 1: The Content Tab (Functionality)<\/b><\/h3><p data-path-to-node=\"5\"><i data-path-to-node=\"5\" data-index-in-node=\"0\">Located in <code data-path-to-node=\"5\" data-index-in-node=\"11\">register_controls()<\/code> under <code data-path-to-node=\"5\" data-index-in-node=\"37\">TAB_CONTENT<\/code><\/i><\/p><ul data-path-to-node=\"6\"><li><p data-path-to-node=\"6,0,0\"><b data-path-to-node=\"6,0,0\" data-index-in-node=\"0\">Item 1:<\/b> Widget Header (Text + Alignment)<\/p><\/li><li><p data-path-to-node=\"6,1,0\"><b data-path-to-node=\"6,1,0\" data-index-in-node=\"0\">Item 2:<\/b> Default Rate Selection (Market vs. Fixed)<\/p><\/li><li><p data-path-to-node=\"6,2,0\"><b data-path-to-node=\"6,2,0\" data-index-in-node=\"0\">Item 3:<\/b> Default Coins (Input for &#8220;From&#8221; and &#8220;To&#8221;)<\/p><\/li><li><p data-path-to-node=\"6,3,0\"><b data-path-to-node=\"6,3,0\" data-index-in-node=\"0\">Item 4:<\/b> Branding\/Referral URL (Link control)<\/p><\/li><li><p data-path-to-node=\"6,4,0\"><b data-path-to-node=\"6,4,0\" data-index-in-node=\"0\">Item 5:<\/b> API Key (Existing)<\/p><\/li><\/ul><h3 data-path-to-node=\"7\"><b data-path-to-node=\"7\" data-index-in-node=\"0\">Phase 2: The Style Tab (Aesthetics)<\/b><\/h3><p data-path-to-node=\"8\"><i data-path-to-node=\"8\" data-index-in-node=\"0\">Located in <code data-path-to-node=\"8\" data-index-in-node=\"11\">register_controls()<\/code> under <code data-path-to-node=\"8\" data-index-in-node=\"37\">TAB_STYLE<\/code><\/i><\/p><ul data-path-to-node=\"9\"><li><p data-path-to-node=\"9,0,0\"><b data-path-to-node=\"9,0,0\" data-index-in-node=\"0\">Item 6:<\/b> Container Controls (Background Color, Max-Width, Border Radius)<\/p><\/li><li><p data-path-to-node=\"9,1,0\"><b data-path-to-node=\"9,1,0\" data-index-in-node=\"0\">Item 7:<\/b> Typography (Title Font, Size, Color)<\/p><\/li><li><p data-path-to-node=\"9,2,0\"><b data-path-to-node=\"9,2,0\" data-index-in-node=\"0\">Item 8:<\/b> Button Accents (Active Gradient colors, Inactive Backgrounds)<\/p><\/li><\/ul><h3 data-path-to-node=\"10\"><b data-path-to-node=\"10\" data-index-in-node=\"0\">Phase 3: The Logic Bridge (PHP Render)<\/b><\/h3><p data-path-to-node=\"11\"><i data-path-to-node=\"11\" data-index-in-node=\"0\">Located in <code data-path-to-node=\"11\" data-index-in-node=\"11\">render()<\/code><\/i><\/p><ul data-path-to-node=\"12\"><li><p data-path-to-node=\"12,0,0\"><b data-path-to-node=\"12,0,0\" data-index-in-node=\"0\">Item 9:<\/b> Update HTML to display Sidebar Text\/Links.<\/p><\/li><li><p data-path-to-node=\"12,1,0\"><b data-path-to-node=\"12,1,0\" data-index-in-node=\"0\">Item 10:<\/b> Inject CSS classes based on Sidebar choices.<\/p><\/li><\/ul><h3 data-path-to-node=\"13\"><b data-path-to-node=\"13\" data-index-in-node=\"0\">Phase 4: The Handshake (JavaScript)<\/b><\/h3><p data-path-to-node=\"14\"><i data-path-to-node=\"14\" data-index-in-node=\"0\">Located in your JS file\/section<\/i><\/p><ul data-path-to-node=\"15\"><li><p data-path-to-node=\"15,0,0\"><b data-path-to-node=\"15,0,0\" data-index-in-node=\"0\">Item 11:<\/b> Set JS variables based on Elementor Sidebar settings.<\/p><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ff4cd7f e-flex e-con-boxed e-con e-parent\" data-id=\"ff4cd7f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7108492 elementor-widget elementor-widget-heading\" data-id=\"7108492\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Phase 1<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc17482 elementor-widget elementor-widget-text-editor\" data-id=\"cc17482\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2 data-path-to-node=\"17\"><b data-path-to-node=\"17\" data-index-in-node=\"0\">Step 1: The Header &amp; Alignment (Content Tab)<\/b><\/h2><p data-path-to-node=\"18\">To begin, we are going to add the first control to your sidebar so you can rename or align that &#8220;KoinTool Swap&#8221; title.<\/p><h3 data-path-to-node=\"19\"><b data-path-to-node=\"19\" data-index-in-node=\"0\">1. Find this in your PHP file:<\/b><\/h3><p data-path-to-node=\"20\">Look for the function named: <code data-path-to-node=\"20\" data-index-in-node=\"29\">protected function register_controls() {<\/code><\/p><h3 data-path-to-node=\"21\"><b data-path-to-node=\"21\" data-index-in-node=\"0\">2. Add this Code Block:<\/b><\/h3><p data-path-to-node=\"22\">Place this right at the beginning of that function. This creates the &#8220;Widget Header&#8221; section in your Elementor sidebar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9c3556 elementor-widget elementor-widget-code-highlight\" data-id=\"c9c3556\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 1: WIDGET HEADER ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_header_settings',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'Widget Header', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_CONTENT,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'title_text',\r\n\t\t\t[\r\n\t\t\t\t'label'       => esc_html__( 'Title', 'kointool' ),\r\n\t\t\t\t'type'        => \\Elementor\\Controls_Manager::TEXT,\r\n\t\t\t\t'default'     => esc_html__( 'KoinTool Swap', 'kointool' ),\r\n\t\t\t\t'placeholder' => esc_html__( 'Enter your title here', 'kointool' ),\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'title_alignment',\r\n\t\t\t[\r\n\t\t\t\t'label'   => esc_html__( 'Alignment', 'kointool' ),\r\n\t\t\t\t'type'    => \\Elementor\\Controls_Manager::CHOOSE,\r\n\t\t\t\t'options' => [\r\n\t\t\t\t\t'left' => [\r\n\t\t\t\t\t\t'title' => esc_html__( 'Left', 'kointool' ),\r\n\t\t\t\t\t\t'icon'  => 'eicon-text-align-left',\r\n\t\t\t\t\t],\r\n\t\t\t\t\t'center' => [\r\n\t\t\t\t\t\t'title' => esc_html__( 'Center', 'kointool' ),\r\n\t\t\t\t\t\t'icon'  => 'eicon-text-align-center',\r\n\t\t\t\t\t],\r\n\t\t\t\t\t'right' => [\r\n\t\t\t\t\t\t'title' => esc_html__( 'Right', 'kointool' ),\r\n\t\t\t\t\t\t'icon'  => 'eicon-text-align-right',\r\n\t\t\t\t\t],\r\n\t\t\t\t],\r\n\t\t\t\t'default' => 'center',\r\n\t\t\t\t'selectors' => [\r\n\t\t\t\t\t'{{WRAPPER}} .kts-title' => 'text-align: {{VALUE}};',\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-16bef52 e-flex e-con-boxed e-con e-parent\" data-id=\"16bef52\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1614c4 elementor-widget elementor-widget-text-editor\" data-id=\"b1614c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2 data-path-to-node=\"2\"><b data-path-to-node=\"2\" data-index-in-node=\"0\">Step 2: Default Rate &amp; Coins (Content Tab)<\/b><\/h2><p data-path-to-node=\"3\">This step adds the controls to choose which rate type the widget starts on and which coins are pre-selected when the page loads.<\/p><h3 data-path-to-node=\"4\"><b data-path-to-node=\"4\" data-index-in-node=\"0\">1. Find this in your PHP file:<\/b><\/h3><p data-path-to-node=\"5\">Directly after the <code data-path-to-node=\"5\" data-index-in-node=\"19\">end_controls_section()<\/code> from Step 1.<\/p><h3 data-path-to-node=\"6\"><b data-path-to-node=\"6\" data-index-in-node=\"0\">2. Add this Code Block:<\/b><\/h3><p data-path-to-node=\"7\">This creates the &#8220;Swap Settings&#8221; section in your Elementor sidebar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-029d0a1 elementor-widget elementor-widget-code-highlight\" data-id=\"029d0a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 2: SWAP SETTINGS ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_swap_settings',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'Swap Settings', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_CONTENT,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'default_rate_type',\r\n\t\t\t[\r\n\t\t\t\t'label'   => esc_html__( 'Default Rate Type', 'kointool' ),\r\n\t\t\t\t'type'    => \\Elementor\\Controls_Manager::SELECT,\r\n\t\t\t\t'default' => 'standard',\r\n\t\t\t\t'options' => [\r\n\t\t\t\t\t'standard' => esc_html__( 'Exchange now (Market)', 'kointool' ),\r\n\t\t\t\t\t'fixed'    => esc_html__( 'Fixed Rate', 'kointool' ),\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'default_from_coin',\r\n\t\t\t[\r\n\t\t\t\t'label'       => esc_html__( 'Default From Coin', 'kointool' ),\r\n\t\t\t\t'type'        => \\Elementor\\Controls_Manager::TEXT,\r\n\t\t\t\t'default'     => 'btc',\r\n\t\t\t\t'placeholder' => esc_html__( 'e.g. btc', 'kointool' ),\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'default_to_coin',\r\n\t\t\t[\r\n\t\t\t\t'label'       => esc_html__( 'Default To Coin', 'kointool' ),\r\n\t\t\t\t'type'        => \\Elementor\\Controls_Manager::TEXT,\r\n\t\t\t\t'default'     => 'eth',\r\n\t\t\t\t'placeholder' => esc_html__( 'e.g. eth', 'kointool' ),\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe7be8a e-flex e-con-boxed e-con e-parent\" data-id=\"fe7be8a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a1d09e elementor-widget elementor-widget-text-editor\" data-id=\"8a1d09e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2 data-path-to-node=\"10\"><b data-path-to-node=\"10\" data-index-in-node=\"0\">Step 3: Branding &amp; Referral URL (Content Tab)<\/b><\/h2><p data-path-to-node=\"11\">This allows you to change the destination of the &#8220;Expected Rate&#8221; links so they point back to your site with your referral parameters.<\/p><h3 data-path-to-node=\"12\"><b data-path-to-node=\"12\" data-index-in-node=\"0\">1. Find this in your PHP file:<\/b><\/h3><p data-path-to-node=\"13\">Directly after the <code data-path-to-node=\"13\" data-index-in-node=\"19\">end_controls_section()<\/code> from Step 2.<\/p><h3 data-path-to-node=\"14\"><b data-path-to-node=\"14\" data-index-in-node=\"0\">2. Add this Code Block:<\/b><\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f15761 elementor-widget elementor-widget-code-highlight\" data-id=\"8f15761\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 3: BRANDING & LINKS ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_branding',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'Branding & Links', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_CONTENT,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'referral_url',\r\n\t\t\t[\r\n\t\t\t\t'label'       => esc_html__( 'Referral\/Info URL', 'kointool' ),\r\n\t\t\t\t'type'        => \\Elementor\\Controls_Manager::URL,\r\n\t\t\t\t'placeholder' => esc_html__( 'https:\/\/kointool.com', 'kointool' ),\r\n\t\t\t\t'default'     => [\r\n\t\t\t\t\t'url' => 'https:\/\/kointool.com',\r\n\t\t\t\t\t'is_external' => true,\r\n\t\t\t\t\t'nofollow' => true,\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c419a5 e-flex e-con-boxed e-con e-parent\" data-id=\"0c419a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c5ff18 elementor-widget elementor-widget-text-editor\" data-id=\"6c5ff18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2 data-path-to-node=\"17\"><b data-path-to-node=\"17\" data-index-in-node=\"0\">Step 4: API Key (Content Tab &#8211; Existing)<\/b><\/h2><p data-path-to-node=\"18\">You likely already have this, but to keep the Blueprint complete, ensure your API key control is wrapped in its own section or added to the &#8220;Swap Settings.&#8221;<\/p><h3 data-path-to-node=\"19\"><b data-path-to-node=\"19\" data-index-in-node=\"0\">1. The Code Structure:<\/b><\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f9d20d elementor-widget elementor-widget-code-highlight\" data-id=\"2f9d20d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 4: API CONFIGURATION ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_api_config',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'API Settings', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_CONTENT,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'api_key',\r\n\t\t\t[\r\n\t\t\t\t'label'   => esc_html__( 'API Key', 'kointool' ),\r\n\t\t\t\t'type'    => \\Elementor\\Controls_Manager::TEXT,\r\n\t\t\t\t'default' => '', \/\/ Your default key here\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b23c8c e-flex e-con-boxed e-con e-parent\" data-id=\"7b23c8c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee13dd2 elementor-widget elementor-widget-heading\" data-id=\"ee13dd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Phase 2: The Style Tab (Aesthetics)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d142c59 elementor-widget elementor-widget-text-editor\" data-id=\"d142c59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-path-to-node=\"1\"><i data-path-to-node=\"1\" data-index-in-node=\"0\">Located in <code data-path-to-node=\"1\" data-index-in-node=\"11\">register_controls()<\/code> under <code data-path-to-node=\"1\" data-index-in-node=\"37\">TAB_STYLE<\/code><\/i><\/p><p data-path-to-node=\"2\">This phase moves the visual heavy lifting into the Elementor Sidebar. Instead of editing your CSS file, you\u2019ll use color pickers and sliders to update your three &#8220;Temp Kits.&#8221;<\/p><hr data-path-to-node=\"3\" \/><p data-path-to-node=\"6\">\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d3bc73 elementor-widget elementor-widget-text-editor\" data-id=\"6d3bc73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-path-to-node=\"2\">\u00a0<\/p><h3 data-path-to-node=\"4\"><b data-path-to-node=\"4\" data-index-in-node=\"0\">Step 5: Container &amp; Layout (Style Tab)<\/b><\/h3><p data-path-to-node=\"5\">This controls the physical box (<code data-path-to-node=\"5\" data-index-in-node=\"32\">#kts-vault<\/code>). It allows you to toggle between your &#8220;SwapKit&#8221; yellow look and the &#8220;KoinTool&#8221; blue look by changing the background and width.<\/p><p data-path-to-node=\"6\"><b data-path-to-node=\"6\" data-index-in-node=\"0\">Add this right after the last <code data-path-to-node=\"6\" data-index-in-node=\"30\">end_controls_section()<\/code> from Phase 1:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-efac63d elementor-widget elementor-widget-code-highlight\" data-id=\"efac63d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 5: CONTAINER STYLE ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_container_style',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'Container', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_STYLE,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'vault_bg_color',\r\n\t\t\t[\r\n\t\t\t\t'label'     => esc_html__( 'Background Color', 'kointool' ),\r\n\t\t\t\t'type'      => \\Elementor\\Controls_Manager::COLOR,\r\n\t\t\t\t'default'   => '#121214',\r\n\t\t\t\t'selectors' => [\r\n\t\t\t\t\t'{{WRAPPER}} #kts-vault' => 'background-color: {{VALUE}};',\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_responsive_control(\r\n\t\t\t'vault_max_width',\r\n\t\t\t[\r\n\t\t\t\t'label'      => esc_html__( 'Max Width (px)', 'kointool' ),\r\n\t\t\t\t'type'       => \\Elementor\\Controls_Manager::SLIDER,\r\n\t\t\t\t'size_units' => [ 'px' ],\r\n\t\t\t\t'range'      => [\r\n\t\t\t\t\t'px' => [ 'min' => 300, 'max' => 800 ],\r\n\t\t\t\t],\r\n\t\t\t\t'default'    => [ 'unit' => 'px', 'size' => 500 ],\r\n\t\t\t\t'selectors'  => [\r\n\t\t\t\t\t'{{WRAPPER}} #kts-vault' => 'max-width: {{SIZE}}{{UNIT}};',\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'vault_border_radius',\r\n\t\t\t[\r\n\t\t\t\t'label'      => esc_html__( 'Border Radius', 'kointool' ),\r\n\t\t\t\t'type'       => \\Elementor\\Controls_Manager::SLIDER,\r\n\t\t\t\t'size_units' => [ 'px' ],\r\n\t\t\t\t'default'    => [ 'unit' => 'px', 'size' => 24 ],\r\n\t\t\t\t'selectors'  => [\r\n\t\t\t\t\t'{{WRAPPER}} #kts-vault' => 'border-radius: {{SIZE}}{{UNIT}};',\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7f0b7e1 e-flex e-con-boxed e-con e-parent\" data-id=\"7f0b7e1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2d5668 elementor-widget elementor-widget-text-editor\" data-id=\"b2d5668\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 data-path-to-node=\"9\"><b data-path-to-node=\"9\" data-index-in-node=\"0\">Step 6: Typography &amp; Header (Style Tab)<\/b><\/h3><p data-path-to-node=\"10\">This links your theme&#8217;s fonts to the widget and fixes the &#8220;Title Alignment&#8221; and &#8220;Font Size&#8221; issues.<\/p><p data-path-to-node=\"11\"><b data-path-to-node=\"11\" data-index-in-node=\"0\">Add this after Step 5:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8660cca elementor-widget elementor-widget-code-highlight\" data-id=\"8660cca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 6: TYPOGRAPHY ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_typography_style',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'Typography', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_STYLE,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_group_control(\r\n\t\t\t\\Elementor\\Group_Control_Typography::get_type(),\r\n\t\t\t[\r\n\t\t\t\t'name'     => 'title_typography',\r\n\t\t\t\t'label'    => esc_html__( 'Title Font', 'kointool' ),\r\n\t\t\t\t'selector' => '{{WRAPPER}} .kts-title',\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'title_color',\r\n\t\t\t[\r\n\t\t\t\t'label'     => esc_html__( 'Title Color', 'kointool' ),\r\n\t\t\t\t'type'      => \\Elementor\\Controls_Manager::COLOR,\r\n\t\t\t\t'default'   => '#fff',\r\n\t\t\t\t'selectors' => [\r\n\t\t\t\t\t'{{WRAPPER}} .kts-title' => 'color: {{VALUE}};',\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8eb389b e-flex e-con-boxed e-con e-parent\" data-id=\"8eb389b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-891756b elementor-widget elementor-widget-text-editor\" data-id=\"891756b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 data-path-to-node=\"14\"><b data-path-to-node=\"14\" data-index-in-node=\"0\">Step 7: Toggle Buttons &amp; Accents (Style Tab)<\/b><\/h3><p data-path-to-node=\"15\">This is the &#8220;Magic&#8221; section. It replaces our hardcoded purple gradient with a dynamic one, allowing you to create the &#8220;Yellow\/Black&#8221; kit or the &#8220;Blue\/Dark&#8221; kit instantly.<\/p><p data-path-to-node=\"16\"><b data-path-to-node=\"16\" data-index-in-node=\"0\">Add this after Step 6:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5c5dc5 elementor-widget elementor-widget-code-highlight\" data-id=\"e5c5dc5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ --- SECTION 7: BUTTONS & TOGGLES ---\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_button_style',\r\n\t\t\t[\r\n\t\t\t\t'label' => esc_html__( 'Buttons & Accents', 'kointool' ),\r\n\t\t\t\t'tab'   => \\Elementor\\Controls_Manager::TAB_STYLE,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_group_control(\r\n\t\t\t\\Elementor\\Group_Control_Background::get_type(),\r\n\t\t\t[\r\n\t\t\t\t'name'     => 'active_button_bg',\r\n\t\t\t\t'label'    => esc_html__( 'Active Button Gradient', 'kointool' ),\r\n\t\t\t\t'types'    => [ 'classic', 'gradient' ],\r\n\t\t\t\t'selector' => '{{WRAPPER}} .kts-rate-btn.active, {{WRAPPER}} .kts-main-btn',\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'inactive_button_color',\r\n\t\t\t[\r\n\t\t\t\t'label'     => esc_html__( 'Inactive Button BG', 'kointool' ),\r\n\t\t\t\t'type'      => \\Elementor\\Controls_Manager::COLOR,\r\n\t\t\t\t'default'   => '#1b1b1f',\r\n\t\t\t\t'selectors' => [\r\n\t\t\t\t\t'{{WRAPPER}} .kts-rate-btn' => 'background-color: {{VALUE}};',\r\n\t\t\t\t],\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-44c7d54 e-flex e-con-boxed e-con e-parent\" data-id=\"44c7d54\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-81e5fb0 elementor-widget elementor-widget-heading\" data-id=\"81e5fb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Phase 3: The Logic Bridge (PHP Render)\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bae6e1 elementor-widget elementor-widget-text-editor\" data-id=\"1bae6e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-path-to-node=\"6\"><i data-path-to-node=\"6\" data-index-in-node=\"0\">Located in the <code data-path-to-node=\"6\" data-index-in-node=\"15\">render()<\/code> function at the bottom of your widget file.<\/i><\/p><p data-path-to-node=\"7\">This phase is where the &#8220;Brain&#8221; (Sidebar) actually talks to the &#8220;Body&#8221; (HTML). We replace your hardcoded strings with PHP variables.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b884c88 e-flex e-con-boxed e-con e-parent\" data-id=\"b884c88\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf3a204 elementor-widget elementor-widget-text-editor\" data-id=\"cf3a204\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 data-path-to-node=\"8\"><b data-path-to-node=\"8\" data-index-in-node=\"0\">Step 8: Reading the Sidebar &amp; Outputting HTML<\/b><\/h3><p data-path-to-node=\"9\"><b data-path-to-node=\"9\" data-index-in-node=\"0\">Find your <code data-path-to-node=\"9\" data-index-in-node=\"10\">render()<\/code> function and replace the top section with this:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a20d752 elementor-widget elementor-widget-code-highlight\" data-id=\"a20d752\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>protected function render() {\r\n\t\t$settings = $this->get_settings_for_display();\r\n\t\t\r\n\t\t\/\/ 1. Handle the Header Logic\r\n\t\t$title = ! empty( $settings['title_text'] ) ? $settings['title_text'] : '';\r\n\t\t\r\n\t\t\/\/ 2. Handle the Rate Toggle Logic\r\n\t\t$default_rate = $settings['default_rate_type'];\r\n\t\t$market_active = ( 'standard' === $default_rate ) ? 'active' : '';\r\n\t\t$fixed_active  = ( 'fixed' === $default_rate ) ? 'active' : '';\r\n\r\n\t\t\/\/ 3. Handle the Branding Link\r\n\t\t$referral_url = ! empty( $settings['referral_url']['url'] ) ? $settings['referral_url']['url'] : 'https:\/\/kointool.com';\r\n\t\t?>\r\n\r\n\t\t<div id=\"kts-vault\">\r\n\t\t\t<?php if ( $title ) : ?>\r\n\t\t\t\t<h2 class=\"kts-title\"><?php echo esc_html( $title ); ?><\/h2>\r\n\t\t\t<?php endif; ?>\r\n\r\n\t\t\t<div class=\"kts-rate-toggle-wrap\">\r\n\t\t\t\t<button type=\"button\" class=\"kts-rate-btn <?php echo esc_attr( $market_active ); ?>\" data-rate-type=\"standard\">Exchange now<\/button>\r\n\t\t\t\t<button type=\"button\" class=\"kts-rate-btn <?php echo esc_attr( $fixed_active ); ?>\" data-rate-type=\"fixed\">Fixed Rate<\/button>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div id=\"kts-rate-summary\">\r\n\t\t\t\t<span class=\"rate-text\"><\/span>\r\n\t\t\t\t<a href=\"<?php echo esc_url( $referral_url ); ?>\" target=\"_blank\" class=\"rate-link\">Expected rate <i class=\"eicon-editor-external-link\"><\/i><\/a>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t<?php\r\n\t}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e65fcf2 e-flex e-con-boxed e-con e-parent\" data-id=\"e65fcf2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33ec370 elementor-widget elementor-widget-text-editor\" data-id=\"33ec370\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h4 data-path-to-node=\"5\"><b data-path-to-node=\"5\" data-index-in-node=\"0\">Step 8.5: The Data Handshake (Default Coins &amp; API)<\/b><\/h4><p data-path-to-node=\"6\"><b data-path-to-node=\"6\" data-index-in-node=\"0\">Find your opening <code data-path-to-node=\"6\" data-index-in-node=\"18\">&lt;div id=\"kts-vault\"&gt;<\/code> in the <code data-path-to-node=\"6\" data-index-in-node=\"46\">render()<\/code> function and replace it with this &#8220;Data Attribute&#8221; version:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e375971 elementor-widget elementor-widget-code-highlight\" data-id=\"e375971\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>\/\/ Step 8.5: Injecting Sidebar Data into HTML Attributes\r\n        $default_from = ! empty( $settings['default_from_coin'] ) ? $settings['default_from_coin'] : 'btc';\r\n        $default_to   = ! empty( $settings['default_to_coin'] ) ? $settings['default_to_coin'] : 'eth';\r\n        $api_key      = ! empty( $settings['api_key'] ) ? $settings['api_key'] : '';\r\n\r\n        ?>\r\n        <div id=\"kts-vault\" \r\n             data-default-from=\"<?php echo esc_attr( $default_from ); ?>\" \r\n             data-default-to=\"<?php echo esc_attr( $default_to ); ?>\" \r\n             data-api-key=\"<?php echo esc_attr( $api_key ); ?>\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6b2fdc e-flex e-con-boxed e-con e-parent\" data-id=\"f6b2fdc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d0334c elementor-widget elementor-widget-heading\" data-id=\"9d0334c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Phase 4: The Handshake (JavaScript)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-858121b elementor-widget elementor-widget-text-editor\" data-id=\"858121b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-path-to-node=\"13\"><i data-path-to-node=\"13\" data-index-in-node=\"0\">This goes in your JS file or the script section of your plugin.<\/i><\/p><p data-path-to-node=\"14\">The JS needs to know what you picked in Elementor so it can start the API calls correctly (e.g., starting with BTC\/ETH or Fixed\/Market).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b32924 e-flex e-con-boxed e-con e-parent\" data-id=\"9b32924\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-963a158 elementor-widget elementor-widget-text-editor\" data-id=\"963a158\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 data-path-to-node=\"15\"><b data-path-to-node=\"15\" data-index-in-node=\"0\">Step 9: Syncing JS with Elementor<\/b><\/h3><p data-path-to-node=\"16\"><b data-path-to-node=\"16\" data-index-in-node=\"0\">Add these lines to the very top of your Widget Initialization script:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8e8867 elementor-widget elementor-widget-code-highlight\" data-id=\"b8e8867\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ Step 9: The v2.6 Handshake\r\nconst ktsVault = document.getElementById('kts-vault');\r\nconst activeBtn = ktsVault.querySelector('.kts-rate-btn.active');\r\n\r\n\/\/ 1. Set the initial state based on the Elementor Sidebar\r\nlet isFixed = activeBtn.getAttribute('data-rate-type') === 'fixed';\r\n\r\n\/\/ 2. Grab the default coins (We will pass these from PHP in the next step)\r\nlet currentFrom = ktsVault.getAttribute('data-default-from') || 'btc';\r\nlet currentTo = ktsVault.getAttribute('data-default-to') || 'eth';<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-55c5a6b e-flex e-con-boxed e-con e-parent\" data-id=\"55c5a6b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17e448b elementor-widget elementor-widget-text-editor\" data-id=\"17e448b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h3 data-path-to-node=\"12\"><b data-path-to-node=\"12\" data-index-in-node=\"0\">Step 9.5: Variable Initialization (The Sync)<\/b><\/h3><p data-path-to-node=\"13\"><b data-path-to-node=\"13\" data-index-in-node=\"0\">Find where you define your <code data-path-to-node=\"13\" data-index-in-node=\"27\">from<\/code> and <code data-path-to-node=\"13\" data-index-in-node=\"36\">to<\/code> variables in your JS and replace them with this:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7389f21 elementor-widget elementor-widget-code-highlight\" data-id=\"7389f21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ Step 9.5: Syncing JS variables with the Sidebar Data Attributes\r\n        const vaultContainer = document.getElementById('kts-vault');\r\n\r\n        \/\/ Grab the coins you set in the Elementor Sidebar\r\n        let currentFrom = vaultContainer.getAttribute('data-default-from').toLowerCase();\r\n        let currentTo   = vaultContainer.getAttribute('data-default-to').toLowerCase();\r\n\r\n        \/\/ Grab the API Key you set in the Elementor Sidebar\r\n        const apiKey = vaultContainer.getAttribute('data-api-key');<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Full v2.6 Blueprint: &#8220;The Atomic Overhaul&#8221; Phase 1: The Content Tab (Functionality) Located in register_controls() under TAB_CONTENT Item 1: Widget Header (Text + Alignment) Item 2: Default Rate Selection (Market vs. Fixed) Item 3: Default Coins (Input for &#8220;From&#8221; and &#8220;To&#8221;) Item 4: Branding\/Referral URL (Link control) Item 5: API Key (Existing) Phase 2: [&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-74","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":10,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages\/74\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}