Cara Pemasangan Widget SDK Lama

Tldr

Cara ini di khususkan untuk pengguna SDK lama sebelum versi 0.6.0 , apabila masih ingin memanfaatkan fitur-fitur tertentu.

Berikut ini beberapa hal yang dapat Anda lakukan terkait pemasangan widget

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 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>
    

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

Snippet SDK Lama (< 0.6.0):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script id="mp-snippet">;
    window.mhAsyncInit = function() {
        MP.APP_KEY = 'YOUR-APP-KEY';
        // Parameter Lain-nya
    };

    !function(a,b,c){var d=a.createElement(b),e=a.getElementById("mp-snippet");
    d.async=!0,d.id=c,d.src="https://mpwidget.s3.amazonaws.com/dist/v0.5.0/jssdk.min.js",
    e.parentNode.insertBefore(d,e)}(document,"script","mp-widget");
</script>;

Ganti dengan APP KEY anda

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

Gunakan Elemen HTML lainnya

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


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
18
//---Contoh panggil widget---//
<script>
    function onPageLoad() {
        MP.openWidget();
    }
</script>

//---Snippet Wajib! untuk SDK---//
<script id="mp-snippet">;
    window.mhAsyncInit = function() {
        MP.APP_KEY = 'YOUR-SECRET-KEY';
        // Parameter Lain-nya
    };

    !function(a,b,c){var d=a.createElement(b),e=a.getElementById("mp-snippet");
    d.async=!0,d.id=c,d.src="https://mpwidget.s3.amazonaws.com/dist/v0.5.0/jssdk.min.js",
    e.parentNode.insertBefore(d,e)}(document,"script","mp-widget");
</script>;

Butuh Demo?

Anda juga dapat mengakses Demo Megahubs untuk gambaran implementasi

API & Event Handling

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


iFrame memungkinkan Anda untuk me-load halaman lain di dalam halaman utama. Untuk kasus megahubs, anda dapat memanfaatkan iFrame untuk menampilkan widget di Sidebar atau block manapun dari website Anda, seperti contoh berikut

Warning

iFrame dibawah ini hanya untuk contoh dan tidak dapat digunakan untuk transaksi

Contoh:

Cara Implementasi

Siapkan 1 halaman seperti berikut, khusus untuk meload widget:

widget.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
            <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
            <title>Publisher Page</title>
        </head>
        <body>
            <noscript>
                Javascript tidak aktif
            </noscript>

            <script id="mp-snippet">
            /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
            window.mhAsyncInit = function() {
                //-- CONFIG INIT
                MP.APP_KEY = 'MY-SECRET-KEY';
            };

            !function(a,b,c){var d=a.createElement(b),e=a.getElementById("mp-snippet");
            d.async=!0,d.id=c,d.src="https://mpwidget.s3.amazonaws.com/dist/v0.4.0/jssdk.min.js",
            e.parentNode.insertBefore(d,e)}(document,"script","mp-widget");
            </script>
        </body>
    </html>

Pada halaman utama load iFrame ke halaman yang me-load widget

index.html

1
2
3
4
5
6
7
8
9
    <html>
        <head>
            <title>Main Website</title>
        </head>
        <body>
            <!-- Load Iframe -->
            <iframe src="widget.html" frameborder="2" height="400px"></iframe>
        </body>
    </html>

Kontak Kami

Anda dapat menghubungi kami di Halaman Kontak Kami untuk bantuan integrasi lainnya.


Cara Update versi Widget SDK

Silahkan menuju halaman Changelog untuk informasi rilis dan update.