kalkulink

Dokumentasi/Sharing & Embedding/Embed Guide
Embed Guide

Embed Kalkulator di Website

Panduan lengkap untuk mengintegrasikan kalkulator KalkuLink ke dalam website Anda dengan iframe responsive

Dapatkan Embed CodeLihat Metode Embed
Metode Embedding

Basic Iframe

Embed sederhana dengan iframe standar

Code
<iframe
  src="https://kalkulink.com/username/kalkulator-slug"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

✅ Kelebihan

  • Mudah diimplementasi
  • Universal support
  • Tidak perlu JavaScript

⚠️ Kekurangan

  • •Ukuran tetap
  • •Styling terbatas
  • •Tidak responsive otomatis

Responsive Iframe

Iframe dengan aspect ratio responsive

Code
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://kalkulink.com/username/kalkulator-slug"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>

✅ Kelebihan

  • Responsive design
  • Maintain aspect ratio
  • Mobile friendly

⚠️ Kekurangan

  • •Perlu CSS tambahan
  • •Aspect ratio tetap

Auto-Resize Iframe

Iframe yang menyesuaikan tinggi konten otomatis

Code
<iframe
  id="kalkulink-iframe"
  src="https://kalkulink.com/username/kalkulator-slug?embed=true"
  width="100%"
  height="400"
  frameborder="0"
  scrolling="no">
</iframe>

<script>
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://kalkulink.com') return;
  if (event.data.type === 'resize') {
    document.getElementById('kalkulink-iframe').style.height = event.data.height + 'px';
  }
});
</script>

✅ Kelebihan

  • Tinggi otomatis
  • Tidak ada scrollbar
  • User experience terbaik

⚠️ Kekurangan

  • •Perlu JavaScript
  • •Lebih kompleks
Opsi Kustomisasi
themeParameter

Tema warna (light/dark/auto)

?theme=dark
light, dark, auto
hideHeaderParameter

Sembunyikan header kalkulator

?hideHeader=true
true, false
hideFooterParameter

Sembunyikan footer kalkulator

?hideFooter=true
true, false
accentColorParameter

Warna aksen kustom (hex)

?accentColor=%23007bff
Hex color code (URL encoded)
borderRadiusParameter

Border radius dalam px

?borderRadius=12
0-20 (pixels)
compactParameter

Mode kompak untuk ruang terbatas

?compact=true
true, false

Contoh URL Lengkap:

https://kalkulink.com/john/loan-calculator?theme=dark&hideHeader=true&accentColor=%23007bff&compact=true&embed=true
Responsive Design

Mobile

< 768px

height: 500px, compact=true
Gunakan mode kompak untuk layar kecil

Tablet

768px - 1024px

height: 600px
Ukuran default biasanya optimal

Desktop

> 1024px

height: 700px
Bisa gunakan ukuran lebih besar untuk detail lebih

💡 Tips Responsive

  • • Gunakan parameter compact=true untuk layar mobile
  • • Test di berbagai ukuran layar untuk memastikan UX optimal
  • • Pertimbangkan orientation change di mobile device
  • • Gunakan CSS media queries untuk fine-tuning
Integrasi Platform

WordPress Integration

// Shortcode untuk theme/functions.php
function kalkulink_embed_shortcode($atts) {
    $atts = shortcode_atts(array(
        'username' => '',
        'slug' => '',
        'height' => '600',
        'theme' => 'auto',
    ), $atts);

    $src = "https://kalkulink.com/{$atts['username']}/{$atts['slug']}?theme={$atts['theme']}&embed=true";

    return '<iframe src="' . esc_url($src) . '" width="100%" height="' . esc_attr($atts['height']) . '" frameborder="0"></iframe>';
}
add_shortcode('kalkulink', 'kalkulink_embed_shortcode');

// Penggunaan: [kalkulink username="john" slug="loan-calculator" height="500" theme="light"]
SEO Optimization

Structured Data

Tambahkan schema markup untuk SEO

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Kalkulator Pinjaman",
  "url": "https://yoursite.com/loan-calculator",
  "description": "Hitung cicilan pinjaman dengan mudah",
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "Web Browser"
}
</script>

Meta Tags

Optimasi meta tags untuk halaman dengan embed

<title>Kalkulator Pinjaman - Hitung Cicilan Online</title>
<meta name="description" content="Gunakan kalkulator pinjaman online untuk menghitung cicilan bulanan, total bunga, dan biaya pinjaman Anda.">
<meta name="keywords" content="kalkulator pinjaman, cicilan, bunga, kredit">
<meta property="og:title" content="Kalkulator Pinjaman Online">
<meta property="og:description" content="Hitung cicilan pinjaman dengan mudah dan akurat">
<meta property="og:image" content="https://yoursite.com/calculator-preview.jpg">
Troubleshooting

Iframe tidak muncul atau kosong

Solusi:

  • Periksa URL kalkulator apakah benar dan dapat diakses
  • Pastikan kalkulator sudah dipublikasikan (isPublic: true)
  • Cek browser console untuk error CORS atau X-Frame-Options
  • Verify username dan slug sesuai dengan yang ada

Iframe tidak responsive di mobile

Solusi:

  • Gunakan wrapper dengan aspect ratio CSS
  • Tambahkan parameter ?compact=true untuk mobile
  • Set viewport meta tag: <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  • Gunakan CSS media queries untuk ukuran berbeda

Auto-resize tidak bekerja

Solusi:

  • Pastikan parameter ?embed=true ditambahkan ke URL
  • Verify event listener untuk message dari iframe
  • Cek origin domain dalam event listener
  • Test di browser yang support postMessage API

Styling tidak sesuai dengan website

Solusi:

  • Gunakan parameter theme (light/dark/auto)
  • Customize accentColor sesuai brand Anda
  • Sesuaikan borderRadius dengan design system
  • Pertimbangkan mode compact untuk layout yang tight
Best Practices

Optimize Loading Performance

Gunakan lazy loading untuk iframe yang tidak langsung terlihat

Consistent Branding

Sesuaikan tema dan warna kalkulator dengan design website Anda

Accessibility

Pastikan iframe memiliki title dan description yang jelas untuk screen reader

Analytics Integration

Pertimbangkan untuk tracking user interaction dengan kalkulator embed

Formula Editor GuideSelanjutnya: API Documentation