Membuat Plugin WordPress Click-to-Chat WhatsApp

3 min read

Membuat Plugin WordPress WhatsApp
Ilustrasi (Logo WordPress: wordpress.org)

TeknoCerdas.com – Salam cerdas untuk kita semua. Beberapa tahun terakhir banyak website yang menyediakan tombol untuk kontak atau share artikel via WhatsApp. Ketika tombol tersebut diklik maka aplikasi WhatsApp akan terbuka dan langsung membuka chat ke nomor tertentu. Tulisan ini adalah tutorial membuat plugin WordPress click-to-chat WhatsApp.

Plugin ini akan memudahkan pengunjung website untuk mengontak pemilik website menggunakan WhatsApp. Caranya pengunjung hanya perlu melakukan klik icon WhatsApp yang ada pada sudut kanan bawah halaman.

Baca Juga
Membuat Plugin Cache untuk WordPress

Daftar Isi

Struktur dari Plugin

Plugin click-to-chat WhatsApp ini nantinya akan kita namakan TeknoCerdas Kirim WA.

File/DirektoriKeterangan
teknocerdas-kirim-wa/Direktori plugin
- options-page.phpHalaman setting pada Admin
- teknocerdas-kirim-wa.phpFile utama plugin untuk memasang hooks
- wa-button.phpTampilan untuk tombol WhatsApp
Struktur dari plugin TeknoCerdas Kirim WA

Buat sebuah direktori baru pada wp-content/plugins/ dengan nama teknocerdas-kirim-wa. Gunakan perintah berikut jika menggunakan CLI.

$ mkdir wp-content/plugins/teknocerdas-kirim-wa

Saat ini direktori tersebut masih kosong. Berikutnya kita akan membuat file-file PHP yang diperlukan agar plugin tersebut dapat berjalan.

Membuat File teknocerdas-kirim-wa.php

Ini adalah file utama dari plugin. Konvensi dari WordPress adalah nama file utama dari plugin sama dengan nama direktorinya. Buka teks editor dan mulai buat file wp-content/plugins/teknocerdas-kirim-wa/teknocerdas-kirim-wa.php.

Berikut ini adalah konten dari file tersebut.

<?php
/**
 * Plugin Name: TeknoCerdas Kirim WA
 * Plugin URI: https://teknocerdas.com/programming/membuat-plugin-wordpress-click-to-chat-whatsapp/
 * Description: Plugin to open WhatsApp chat
 * Author: Rio Astamal
 * Version: 1.0.0
 * Text Domain: whatsapp
 * Author URI: https://rioastamal.net
 */

defined( 'ABSPATH' ) || exit('Access denied.');

if (is_admin()) {
    add_action( 'admin_init', function() {
        register_setting('teknocerdas-kirim-wa', 'wa-number');
        register_setting('teknocerdas-kirim-wa', 'wa-text-template');
    });

    add_action('admin_menu', function() {
        $teknocerdasKirimWaPage = function() {
            require __DIR__ . '/options-page.php';
        };

        add_options_page(
            __( 'TeknoCerdas Kirim WA - Options', 'textdomain' ),
            __( 'Kirim WA', 'textdomain' ),
            'manage_options',
            'kirim-wa',
            $teknocerdasKirimWaPage
        );
    });
}

add_action('wp_footer', function() {
    require __DIR__ . '/wa-button.php';
EOF;
}, $__priority = 999);

WordPress mengambil informasi plugin dari komentar atau docblock /*..*/ yang ada pada awal file diatas.

Ada beberapa hal yang dilakukan disini yaitu:

  • Membuat submenu baru pada Admin didalam menu Settings yaitu “Kirim WA”. Lihat add_action('admin_menu')
  • Membuat option baru pada setting yaitu wa-number dan wa-text-template.
  • Memasang hooks di footer halaman untuk penempatan tombol WhatsApp lewat add_action('wp_footer').

Membuat File options-page.php

File ini berisi kode untuk menampilkan halaman konfigurasi untuk plugin. Pada halaman ini setup nomor WhatsApp dan template pesan dilakukan. Nomor dan pesan inilah yang otomatis akan dibuka WhatsApp ketika tombol diklik.

<?php
defined( 'ABSPATH' ) || exit('Access denied.');

if (! is_admin()) {
    exit('Access denied.');
}

?><div class="wrap">
<h1>TeknoCerdas Kirim WA</h1>
<form method="post" action="options.php"><?php
    settings_fields( 'teknocerdas-kirim-wa' );
    do_settings_sections( 'teknocerdas-kirim-wa' );
    ?><table class="form-table">
        <tr valign="top">
            <th scope="row">Nomor WhatsApp</th>
            <td><input type="text" name="wa-number"
                placeholder="Contoh: 628123xxx"
                size="50"
                value="<?php echo esc_attr( get_option('wa-number') ); ?>">
            </td>
        </tr>
        <th scope="row">Template Pesan</th>
            <td>
                <textarea cols="50" rows="5" name="wa-text-template"><?php echo esc_attr( get_option('wa-text-template') ); ?></textarea>
            </td>
        </tr>
    </table><?php
    submit_button();
?></form>
</div>

Halaman ini menampilkan inputan teks untuk nomor WhatsApp admin. Satu lagi adalah pesan template dalam bentuk multi-line teks menggunakan element textarea.

Halaman ini mengandalkan file options.php dari WordPress untuk melakukan penyimpanan. Sehingga kita tidak perlu menambahkan kode untuk itu.

Membuat File wa-button.php

Ini adalah file yang menampilkan tombol WhatsApp sekaligus otomatis akan membuka WhatsApp ketika diklik.

<?php defined( 'ABSPATH' ) || exit('Access denied.'); ?><div id="kirim-wa-btn"
  class="kirim-wa" style="font-family: inherit;
  background-color:#26a69a;
  color: white;
  display: inline-block;
  position: fixed;
  bottom: 15px; right: 15px;
  width: 180px; height: 30px;
  border-radius: 4px;
  cursor: pointer;
  z-index:999999">
    <svg class="kirim-wa-svg" style="display: inline-block;
        height:20px; width: 20px;
        position: relative;
        top: 4px; left: 20px;" viewBox="0 0 512 512">
        <path fill="white" d="M259.253137,0.00180389396 C121.502859,0.00180389396 9.83730687,111.662896 9.83730687,249.413175 C9.83730687,296.530232 22.9142299,340.597122 45.6254897,378.191325 L0.613226597,512.001804 L138.700183,467.787757 C174.430395,487.549184 215.522926,498.811168 259.253137,498.811168 C396.994498,498.811168 508.660049,387.154535 508.660049,249.415405 C508.662279,111.662896 396.996727,0.00180389396 259.253137,0.00180389396 L259.253137,0.00180389396 Z M259.253137,459.089875 C216.65782,459.089875 176.998957,446.313956 143.886359,424.41206 L63.3044195,450.21808 L89.4939401,372.345171 C64.3924908,337.776609 49.5608297,295.299463 49.5608297,249.406486 C49.5608297,133.783298 143.627719,39.7186378 259.253137,39.7186378 C374.871867,39.7186378 468.940986,133.783298 468.940986,249.406486 C468.940986,365.025215 374.874096,459.089875 259.253137,459.089875 Z M200.755924,146.247066 C196.715791,136.510165 193.62103,136.180176 187.380228,135.883632 C185.239759,135.781068 182.918689,135.682963 180.379113,135.682963 C172.338979,135.682963 164.002301,138.050856 158.97889,143.19021 C152.865178,149.44439 137.578667,164.09322 137.578667,194.171258 C137.578667,224.253755 159.487251,253.321759 162.539648,257.402027 C165.600963,261.477835 205.268745,324.111057 266.985579,349.682963 C315.157262,369.636141 329.460495,367.859106 340.450462,365.455539 C356.441543,361.9639 376.521811,350.186865 381.616571,335.917077 C386.711331,321.63837 386.711331,309.399797 385.184018,306.857991 C383.654475,304.305037 379.578667,302.782183 373.464955,299.716408 C367.351242,296.659552 337.288812,281.870254 331.68569,279.83458 C326.080339,277.796676 320.898622,278.418749 316.5887,284.378615 C310.639982,292.612729 304.918689,301.074268 300.180674,306.09099 C296.46161,310.02856 290.477218,310.577055 285.331175,308.389764 C278.564174,305.506821 259.516237,298.869139 236.160607,278.048627 C217.988923,261.847958 205.716906,241.83458 202.149458,235.711949 C198.582011,229.598236 201.835077,225.948292 204.584241,222.621648 C207.719135,218.824546 210.610997,216.097679 213.667853,212.532462 C216.724709,208.960555 218.432625,207.05866 220.470529,202.973933 C222.508433,198.898125 221.137195,194.690767 219.607652,191.629452 C218.07588,188.568136 205.835077,158.494558 200.755924,146.247066 Z">
    </svg>
    <span style="display: inline-block; font-size: 16px; margin-left:20px;">Kirim WhatsApp</span>
</div>
<script>
document.getElementById('kirim-wa-btn').addEventListener('click', function(e) {
    var buildUrl = function(options)
    {
        var protocol = options.isMobile ? 'whatsapp://' : 'https://web.whatsapp.com/';

        return protocol + 'send?phone=' + options.phone + '&text=' + options.message;
    };

    window.location.href = buildUrl({
        phone: '<?= urlencode(get_option('wa-number')) ?>',
        message: '<?= urlencode(get_option('wa-text-template')) ?>',
        isMobile: (new RegExp(/iphone|ipod|ipad|android|blackberry|webos|mobile|bb10/i)).test(window.navigator.userAgent)
    });
});
</script>

Jika pengunjung menggunakan perangkat mobile maka yang dibuka adalah aplikasi WhatsApp. Selain itu yang dibuka adalah WhatsApp versi web. Deteksi ini dilakukan pada client side menggunakan Javascript.

Jadi yang membedakan hanyalah protokol yang digunakan, jika mobile maka protokol handler yang digunakan adalah whatsap:// sedangkan pada desktop menggunakan https://web.whatsapp.com.

Untuk tampilan logo digunakan SVG path sehingga tidak ada file gambar yang digunakan.

Proses membuka WhatsApp digunakan client side redirect dari object window yaitu location.href.

Baca Juga
Mengirim WhatsApp Tanpa Simpan Nomor dengan KirimWA.id

Mencoba Plugin TeknoCerdas Kirim WA

Untuk melakukan percobaan terhadap plugin “TeknoCerda Kirim WA” yang baru saja dibuat. Masuk ke WordPress administrator page kemudian ke menu Plugins.

Jika anda melakukan instruksi dengan benar maka akan muncul sebuah plugin baru bernama “TeknoCerdas Kirim WA” yang belum diaktifkan.

Aktivasi Plugin WordPress Kirim WA
Aktivasi Plugin WordPress Kirim WA

Setelah plugin aktif, maka saatnya melakukan setup nomor WhatsApp dan template pesan. Masuk ke halaman Settings – Kirim WA untuk melakukan hal tersebut.

Konfigurasi WordPress Plugin Kirim WA
Konfigurasi WordPress Plugin Kirim WA

Masukkan nomor WhatsApp dengan format internasional tapi tanpa tanda “+” didepan. Contoh 628123456789.

Jika template pesan diisi maka ketika chat WhatsApp terbuka otomatis akan tertulis di WhatsApp teks yang diketikkan pada template tersebut.

Setelah setup selesaikan dilakukan coba buka halaman depan dari WordPress. Harusnya pada sisi pojok kanan bawah terdapat tombol “Kirim WhatsApp” yang berwarna hijau.

Tampilan tombol WordPress plugin Kirim WA
Tampilan tombol WordPress plugin Kirim WA

Sekarang coba klik tombol tersebut. Jika anda menggunakan perangkat mobile harusnya aplikasi WhatsApp otomatis akan terbuka. Jika menggunakan desktop maka WhatsApp web akan terbuka.

Membuat WordPress plugin click-to-chat WhatsApp ternyata sangat mudah dan tidak membutuhkan banyak konfigurasi. Semoga tutorial ini bermanfaat.