Cara Pemasangan Widget

Secara default, widget Megahubs akan tampil dalam bentuk popup yang memungkinkan dukungan sempurna di tampilan Mobile.

Berikut ini beberapa hal yang dapat Anda lakukan terkait pemasangan widget:

Butuh Demo?

Anda juga dapat mengakses Demo Megahubs untuk gambaran implementasi

Cara standar / umum

Cara paling umum untuk memasangkan widget adalah dengan menyiapkan trigger atau pemicu dalam hal ini bisa berupa Button atau elemen lainnya, dengan menambahkan id="mp-hook" pada elemen.

Contoh Implementasi

  • Menggunakan Button

    1
    <button id="mp-hook">My Button</button>
    

    Anda dapat mengubah dan mengatur desain button Anda sendiri sesuai dengan selera dan keinginan.

  • Menggunakan Link / Menu (anchor element)

    1
    <a href="#" id="mp-hook">My Menu</a>
    
  • Menggunakan Link dengan gambar

    1
    <a href="#" id="mp-hook"><img src="https://media.freepik.com/accounts/img/badges/favorites_gold.svg"></a>
    

Tip

Anda dapat menggunakan elemen lain seperti gambar dan lain-lain, dengan syarat id="mp-hook" harus di sisipkan di elemen tsb.

Kemudian copy / paste seluruh snippet di bawah ini, letakkan sebelum tutup </body> pada halaman.

Snippet SDK Baru (>= 0.6.0):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script id="mp-snippet">;
    !function(a,b,c,d,e,f,g){a.MegahubsObject=e,a[e]=a[e]||function(){(a[e]._=a[e]._||[]).push(arguments)},
    a[e].$={start:1*new Date},f=b.createElement(c),g=b.getElementById("mp-snippet"),f.async=1,f.id="mp-widget",
    f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","https://d1npkqd2auelox.cloudfront.net/dist/mhsdk.js","MP");

    MP('init', 'YOUR-APP-KEY', {
        // Parameter Lain-nya
    });

</script>;

Perhatian!!

Ganti YOUR-APP-KEY dengan key Anda sendiri yang di peroleh dari Widget Builder

Issue Kompabilitas

Snippet di atas menggunakan SDK terbaru Megahubs (>= 0.6.0)!, jika anda masih menggunakan versi lama silahkan lihat petunjuk di SDK Lama


Tampilkan secara otomatis

Kadang kala Anda ingin menampilkan langsung widget "tanpa harus menekan tombol" (berguna untuk di embed ke aplikasi) atau ingin menampilkan widget saat terjadi event-event tertentu. Untuk itu kami memberikan fleksibilitas untuk pengoperasiannya melalui cara "ter-program"

Untuk bisa menampilkan widget secara ter-program Anda perlu mengeksekusi method / fungsi MP('openWidget'); pada javascript Anda sebelum tutup </body> tag.

Contoh Implementasi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
//---Contoh panggil widget---//
<script>
    function onPageLoad() {
        MP('openWidget');
    }
</script>

//---Snippet Wajib! untuk SDK---//
<script id="mp-snippet">;
    !function(a,b,c,d,e,f,g){a.MegahubsObject=e,a[e]=a[e]||function(){(a[e]._=a[e]._||[]).push(arguments)},
    a[e].$={start:1*new Date},f=b.createElement(c),g=b.getElementById("mp-snippet"),f.async=1,f.id="mp-widget",
    f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","https://d1npkqd2auelox.cloudfront.net/dist/mhsdk.js","MP");

    MP('init', 'YOUR-APP-KEY', {
        // Parameter Lain-nya
    });
</script>;

Issue Kompabilitas

Snippet di atas menggunakan SDK terbaru Megahubs (>= 0.6.0)!, jika anda masih menggunakan versi lama silahkan lihat petunjuk di SDK Lama

Butuh Demo?

Anda juga dapat mengakses Demo Megahubs untuk gambaran implementasi

Parameter, API, & Event

Lihat Halaman Parameter & Event untuk fungsi API lainnya yang mungkin dapat Anda gunakan.


Tampilkan di dalam iFrame (Deprecated)

Di karenakan adanya issue performance pada iFrame Megahubs, kami tidak merekomendasikan untuk menggunakan iFrame Element untuk me-load Widget Megahubs.

Namun, jika Anda tetap ingin menggunakan iFrame untuk Widget Anda silahkan gunakan SDK versi lama (< 0.6.0). Cek disini untuk Cara Pasang SDK Lama & API


Cara Update versi Widget SDK

Silahkan menuju halaman Changelog untuk informasi rilis dan update.


Kompatibilitas

Browser Versi Dukungan
Google Chrome - -
Firefox - -
Safari - -
UCBrowser - -
Opera Browser - -
Opera Mini - -
IE - -
Edge - -
Samsung Browser - -