Create share links with initial values, plus ready-to-paste code.</p> <p class="small">Choose a tool, add parameters, then copy the link or embed. You can also import an existing URL to edit it.</p> <details class="lang-switch small"> <summary>Other languages</summary> <a data-lang="ja" href="/ja/tools/embed-builder/" hreflang="ja">ja</a> | <a data-lang="en" href="/en/tools/embed-builder/" hreflang="en" aria-current="page" class="is-current">en</a> | <a data-lang="zh-cn" href="/zh-cn/tools/embed-builder/" hreflang="zh-CN">zh-CN</a> | <a data-lang="zh-tw" href="/zh-tw/tools/embed-builder/" hreflang="zh-TW">zh-TW</a> | <a data-lang="zh-hk" href="/zh-hk/tools/embed-builder/" hreflang="zh-HK">zh-HK</a> | <a data-lang="es" href="/es/tools/embed-builder/" hreflang="es">es</a> | <a data-lang="es-419" href="/es-419/tools/embed-builder/" hreflang="es-419">es-419</a> | <a data-lang="es-mx" href="/es-mx/tools/embed-builder/" hreflang="es-MX">es-MX</a> | <a data-lang="pt-br" href="/pt-br/tools/embed-builder/" hreflang="pt-BR">pt-BR</a> | <a data-lang="pt-pt" href="/pt-pt/tools/embed-builder/" hreflang="pt-PT">pt-PT</a> | <a data-lang="id" href="/id/tools/embed-builder/" hreflang="id">id</a> | <a data-lang="vi" href="/vi/tools/embed-builder/" hreflang="vi">vi</a> | <a data-lang="ko" href="/ko/tools/embed-builder/" hreflang="ko">ko</a> | <a data-lang="fr" href="/fr/tools/embed-builder/" hreflang="fr">fr</a> | <a data-lang="de" href="/de/tools/embed-builder/" hreflang="de">de</a> | <a data-lang="ru-ru" href="/ru-ru/tools/embed-builder/" hreflang="ru-RU">ru-RU</a> | <a data-lang="hi-in" href="/hi-in/tools/embed-builder/" hreflang="hi-IN">hi-IN</a> | <a data-lang="ar" href="/ar/tools/embed-builder/" hreflang="ar">ar</a> | <a data-lang="bn-bd" href="/bn-bd/tools/embed-builder/" hreflang="bn-BD">bn-BD</a> | <a data-lang="tr-tr" href="/tr-tr/tools/embed-builder/" hreflang="tr-TR">tr-TR</a> | <a data-lang="th-th" href="/th-th/tools/embed-builder/" hreflang="th-TH">th-TH</a> | <a data-lang="pl-pl" href="/pl-pl/tools/embed-builder/" hreflang="pl-PL">pl-PL</a> | <a data-lang="fil-ph" href="/fil-ph/tools/embed-builder/" hreflang="fil-PH">fil-PH</a> | <a data-lang="ms-my" href="/ms-my/tools/embed-builder/" hreflang="ms-MY">ms-MY</a> | <a data-lang="nl-nl" href="/nl-nl/tools/embed-builder/" hreflang="nl-NL">nl-NL</a> </details> </header> <main class="container"> <div class="sr-only" aria-hidden="true"> <span id="app-title"></span> <span id="app-subtitle"></span> </div> <section class="card embed-builder-hero" aria-labelledby="hero-heading"> <span class="badge">New</span> <h2 id="hero-heading">Make a share link or embed in minutes</h2> <p class="small">Quick start (3 steps)</p> <ol class="embed-builder-quick-steps"> <li>Choose a tool (preset)</li> <li>Add initial parameters</li> <li>Copy the link / embed code</li> </ol> <p class="small">Tip: If you came from an “Embed this…” button, the URL is already imported.</p> <div class="embed-builder-badges"> <span class="pill">base64url cfg</span> <span class="pill">UTM tagging</span> <span class="pill">Auto-height</span> <span class="pill">Import & edit</span> </div> </section> <section class="embed-builder-layout" aria-labelledby="builder-heading"> <h2 id="builder-heading">Create share links and iframe code</h2> <p class="small">Choose a preset or enter a path. The preview and copy-ready code appear on the right.</p> <div class="embed-builder-form"> <section class="card" aria-label="Link settings"> <div class="row"> <label class="inline" for="domain"> <span data-i18n="label.domain">Domain</span> <input id="domain" type="text" value="https://calcbe.com"> </label> <label class="inline" for="preset"> <span data-i18n="label.preset">Preset</span> <select id="preset"> <option value="/en/tools/number-line/" data-i18n="preset.numberLine">Number Line</option> <option value="/en/tools/graph-paper/" data-i18n="preset.graphPaper">Graph Paper</option> <option value="/en/tools/quick-charts/" data-i18n="preset.quickCharts">Quick Charts</option> <option value="/en/tools/worksheet-generator/" data-i18n="preset.worksheetGenerator">Worksheet Generator</option> <option value="/en/tools/random-number/" data-i18n="preset.randomNumber">Random Number Generator</option> <option value="/en/tools/text-case-converter/" data-i18n="preset.textCaseConverter">Text Case Converter</option> <option value="/en/tools/image-resizer/" data-i18n="preset.imageResizer">Image Resizer</option> <option value="/en/tools/random-picker/" data-i18n="preset.randomPicker">Random Picker</option> <option value="/en/tools/zenhan-converter/" data-i18n="preset.zenhanConverter">Zenkaku / Hankaku Converter</option> <option value="/en/tools/json-formatter/" data-i18n="preset.jsonFormatter">JSON Formatter & Validator</option> <option value="__custom" data-i18n="preset.custom">Custom path</option> </select> </label> <label class="inline grow" for="path"> <span data-i18n="label.path">Path</span> <input id="path" type="text" value="/en/tools/number-line/"> </label> </div> <h3 data-i18n="label.params">Parameters</h3> <table class="embed-builder-table" id="tbl"> <thead> <tr> <th scope="col" data-i18n="th.key">Key</th> <th scope="col" data-i18n="th.type">Type</th> <th scope="col" data-i18n="th.value">Value</th> <th scope="col" aria-label="Actions"></th> </tr> </thead> <tbody></tbody> </table> <button type="button" class="primary small" id="btn-add" data-i18n="btn.addrow">Add row</button> <div class="row"> <label class="inline" for="embedFlag"> <span data-i18n="label.embedFlag">Append embed=1</span> <input id="embedFlag" type="checkbox" checked> </label> <label class="inline" for="utm"> <span data-i18n="label.utm">Append UTM</span> <input id="utm" type="checkbox" checked> </label> <label class="inline" for="compress"> <span data-i18n="label.compress">Use base64url JSON (cfg=)</span> <input id="compress" type="checkbox"> </label> <label class="inline" for="usehash"> <span data-i18n="label.usehash">Use hash (#)</span> <input id="usehash" type="checkbox"> </label> <label class="inline" for="boolfmt"> <span data-i18n="label.boolfmt">Boolean format</span> <select id="boolfmt"> <option value="tf" data-i18n="opt.truefalse">true/false</option> <option value="10" data-i18n="opt.onezero">1/0</option> </select> </label> </div> <div class="row"> <label class="inline" for="responsive"> <span data-i18n="label.responsive">Responsive (aspect-ratio)</span> <input id="responsive" type="checkbox" checked> </label> <label class="inline" for="height"> <span data-i18n="label.height">Height (px)</span> <input id="height" type="number" value="480" min="100"> </label> </div> <div class="row"> <label class="inline full" for="importUrl"> <span data-i18n="import.title">Import from existing URL</span> <input id="importUrl" type="text" data-i18n="import.placeholder"> </label> <button type="button" id="btn-import" class="small" data-i18n="btn.import">Import</button> </div> <div class="embed-builder-actions"> <button type="button" class="primary" id="btn-build" data-i18n="btn.build">Build</button> <button type="button" id="btn-open" data-i18n="btn.open">Open</button> <button type="button" id="btn-copy-link" data-i18n="btn.copyLink">Copy link</button> <button type="button" id="btn-copy-embed" data-i18n="btn.copyEmbed">Copy <iframe></button> <button type="button" id="btn-copy-ah" data-i18n="btn.copyAutoHeight">Copy auto-height snippet</button> <button type="button" id="btn-reset" data-i18n="btn.reset">Reset</button> </div> <div id="err" class="embed-builder-error" role="alert" aria-live="assertive"></div> </section> <section class="card embed-builder-output" aria-label="Output and preview"> <h3 data-i18n="label.preview">Live preview</h3> <div id="previewHost" class="embed-builder-preview" aria-live="polite"></div> <div> <div class="mono label" id="label-out-link" data-i18n="result.link">Share link</div> <textarea id="out-link" rows="3" readonly aria-labelledby="label-out-link"></textarea> </div> <div> <div class="mono label" id="label-out-embed" data-i18n="result.embed">Embed code</div> <textarea id="out-embed" rows="5" readonly aria-labelledby="label-out-embed"></textarea> </div> <div> <div class="mono label" id="label-out-ah" data-i18n="autoheight.snippet">Auto-height listener snippet (optional)</div> <textarea id="out-ah" rows="5" readonly aria-labelledby="label-out-ah"></textarea> </div> <h3 data-i18n="result.steps">How it's generated</h3> <ol id="steps"></ol> <div id="ok" class="embed-builder-status" role="status" aria-live="polite"></div> </section> </div> </section> <section class="card" aria-labelledby="scenarios-heading"> <h2 id="scenarios-heading">Where teams use this builder</h2> <ul> <li>Teachers share a single link so everyone opens the same preset.</li> <li>Docs/wiki teams embed tools with a responsive wrapper and consistent tracking.</li> <li>LMS portals use auto-height to reduce scrollbars.</li> </ul> </section> <section class="card" aria-labelledby="faq-heading"> <h2 id="faq-heading">Frequently asked questions</h2> <details> <summary>What's the quickest way to create an embed?</summary> <p>Use the “Embed this…” button on a CalcBE page. This builder will open and auto-import the current URL, so you can copy a share link or an <iframe> right away.</p> </details> <details> <summary>When should I use cfg= (base64url)?</summary> <p>Use plain query parameters for short, simple presets. Use cfg= when the link gets long (many fields, long text, or LMS editors that break URLs). Toggle “Use base64url JSON (cfg=)” to pack parameters into cfg=.</p> </details> <details> <summary>How do I control iframe size (and avoid scrollbars)?</summary> <p>Keep Responsive enabled for a 16:9 layout, or turn it off and set a fixed Height (px). If you need dynamic resizing, copy the auto-height listener snippet and paste it into the host page.</p> </details> </section> <section class="card" aria-labelledby="related-heading"> <h2 id="related-heading">Related tools</h2> <div id="related"> <!-- prerender:related:related start --> <div class="related-split" style="display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));"> <div> <h3 style="margin-top:0;">Related tools</h3> <ul class="link-list" data-related-prerendered data-related-fallback> <li><a href="/en/tools/solution-export/">Step-by-step solution PDF exporter — multi-language, A4/Letter, shareable JSON</a> <div class="small">Build printable How it's calculated guides with numbering styles, attachments, and A4/Letter layouts. Export JSON, copy doc= base64url links, and print classroom-ready PDFs.</div> </li> <li><a href="/en/tools/worksheet-generator/">Worksheet & Quiz Auto-Generator (steps & PDF)</a> <div class="small">Worksheet & quiz auto-generator with steps (PDF) - linear, quadratic, factoring, fractions, ratios. Deterministic seed for reproducible class handouts.</div> </li> <li><a href="/en/tools/quick-charts/">Quick charts from pasted data — scatter / box plot + regression (with steps, PNG/PDF)</a> <div class="small">Paste spreadsheet data to generate scatter and box plots instantly. Includes OLS, Theil–Sen, and polynomial regression with step-by-step math plus PNG/PDF export.</div> </li> <li><a href="/en/tools/qr-code/">Free QR code generator & scanner – create, verify, download | CalcBE</a> <div class="small">Generate QR codes for URLs, text, Wi-Fi, contacts, phone, email, and SMS. Preview and validate instantly, then download PNG/SVG/PDF or share a settings link — all in your browser.</div> </li> <li><a href="/en/tools/graph-paper/">Graph paper PDF generator | Cartesian, polar, log-log | CalcBE</a> <div class="small">Generate print-ready SVG graph paper in millimeters: Cartesian, polar, log-log, semilog, and isometric grids with How it's generated steps and CSV export.</div> </li> <li><a href="/en/tools/number-line/">Number line & interval visualizer (inequality shading)</a> <div class="small">Shade inequalities and interval unions on an interactive SVG number line. Visualize algebra steps, export SVG/PNG, and copy share-ready URLs for lessons.</div> </li> </ul> </div> <div> <h3 style="margin-top:0;">Related calculators</h3> <ul class="link-list" data-related-prerendered data-related-fallback> <li><a href="/en/calculators/vectors/">Vector Calculator — dot/cross, projection, angle, area, triple (with steps) | CalcBE</a> <div class="small">Compute norms, dot, cross (2D/3D), projection, angle, areas, and triple product with step-by-step logs. 2D diagram, shareable URL, LaTeX and CSV export.</div> </li> <li><a href="/en/calculators/cgpa-percentage/">CGPA ↔ Percentage Converter (Educational)</a> <div class="small">Convert between CGPA and percentage using example mappings (9.5×CGPA or 10×CGPA). Institutions differ—always confirm your institution’s rule.</div> </li> </ul> </div> </div> <!-- prerender:related:related end --> </div> </section> <div class="card"> <div class="ad-slot" data-ad style="min-height:280px;"></div> </div> <div id="comments" class="card"> <button class="button" data-repo="owner/repo" onclick="loadGiscus(this)">Show comments</button> </div> </main> <footer class="container"> <nav class="small footer-links"> <a href="/en/legal/contact/">Contact</a> <a href="/en/legal/privacy-policy/">Privacy</a> <a href="/en/legal/terms/">Terms</a> <a href="/en/legal/cookie-policy/">Cookies</a> <a href="/en/legal/disclaimer/">Disclaimer</a> <a href="/en/legal/ads-disclosure/">Ads</a> <a href="/en/legal/data-requests/">Data Requests</a> </nav> <div class="small">© 2025 CalcBE</div> </footer> <script src="/common/js/ads.js" defer></script> <script src="/common/js/consent.js" defer></script> <script src="/common/js/catalog.min.js" defer></script> <script src="/common/js/giscus.js" defer></script> <script src="/common/js/embed_builder_core.js" defer></script> <script src="/common/js/embed_builder_ui.js" defer></script> <script> window.addEventListener('DOMContentLoaded', function () { applyHeadHreflang({ slug: 'tools/embed-builder/', locales: ['ja','en','zh-cn','zh-tw','zh-hk','es','es-419','es-mx','pt-br','pt-pt','id','vi','ko','fr','de','ru-ru','hi-in','ar','bn-bd','tr-tr','th-th','pl-pl','fil-ph','ms-my','nl-nl'], xDefault: 'en' }); setLangLinks('tools/embed-builder/'); initAds(); renderRelated({ locale: 'en', selfUrl: '/en/tools/embed-builder/', category: 'education', limit: 3 }); if (window.recordCalculatorVisit) { window.recordCalculatorVisit('embed-builder'); } }); </script> </body> </html>