WhatsApp click to chat link to include page title and URL in pre-filled message

1

Happy holidays!

On a website that is based on a CMS engine, and is using a plugin for WhatsApp click to chat link i noticed the page title and URL included in the pre-filled message, which is very useful if you want to know from what website the request is coming:

06-13_09_07
06-13_09_071663×914 39.1 KB

If necessary i can provide the type of CMS and WhatsApp plugin page.

On the official WhatsApp faq page (https://faq.whatsapp.com/en/android/26000030/) i could not see any mention about this feature, so i was wondering if anyone know how this can be done? Because i have looked all over but could not fine a complete list of variable that could be used in the generated link.

I assume this could be done via java script.

Thank you!

2

Hello!

As it states here:

To create your own link with a pre-filled message that will automatically appear in the text field of a chat, use https://wa.me/whatsappphonenumber/?text=urlencodedtext where whatsappphonenumber is a full phone number in international format and URL-encodedtext is the URL-encoded pre-filled message.

Example

`https://wa.me/15551234567?text=I'm%20interested%20in%20your%20car%20for%20sale
3

Thanks for reply, i know perfectly how to create a link according to WhatsApp faq page.

My question is (if you carefully read the question :wink:) about the possibility to include the source page title and URL in the prefilled message. That information is not present on the WhatsApp faq page. But i have seen people doing that via a plugin for a CMS, as on screenshot.

4

I understood the question, but since what they are doing is just including the title and URL on the message I assumed you did try that :stuck_out_tongue:.

Basically, you just need to encode the URL and Title on the text query parameter.

I did a test using an android emulator:

image

Sorry for the blurriness :sweat_smile:.

5

Using JavaScript:

const phone = '+188738782'
const msg = encodeURIComponent('Hello, welcome to freecodecamp.org')
const href = `https://wa.me/${phone}/?text=${msg}`
1 Like
6

Oh, i see, i did not mention that the source page title and URL should be automatically parsed by the script, not manually inserted, this way the general message will be the same, while the source page title and URL will be always different, depending on what page is the script rendered.

To understand what i mean you could test the WhatsApp function for different products on this site: https://peptidy-npcriz.ru/peptidnye-preparaty-revilab/

7

You can retrieve the URL and page title using JS too:

// Assuming <title>The page</title> and URL http://domain.org/the-page
console.log(document.title)
console.log(location.href)
// output:
// The page
// http://domain.org/the-page
8

Thank you! I will try to correctly connect the JS functions with the chat link, even though am not a programmer.

1 Like
9

Hi. So what is the code you finally put to get the result in Whatsapp ?
DO share

10

I could not manage to configure the JavaScript code, so i just used the common code from https://api.whatsapp.com, which doesn’t include the source page title and URL in the prefilled message, demo: https://npcriz-sklad.ru/vibor/po-kategoriyam/tsitomaksy/peptid-bonomarlot-dlya-kostnogo-mozga-60-kapsul-podrobno

Yet, that IS easily realizable via a plugin, which i am going to install when switching my site to a newer Joomla version.

So, if you are using a CMS - look for a plugin that does that, there should be one.

13

hi can you please Elaborate The new updates of WhatsApp, Kindle assist Me.