WhatsApp Buttons

[andersondeoliveiramachado]

[joaomirandas]

Woow! We can create amazing things with this kind of messages, someone knows how to implement?!
Following this issue! Up Up

I made my researches about that, and could realize when inside WhatsApp Web the content is translated to natural buttons, check It Out:

[smashah]

oh my word
I always knew there was a button type. Never seen it in the wild though.

[smashah]

might need to skype call/remote desktop one of you to reverse engineer this one.

[joaomirandas]

@smashah Awesome! i'm excited to initiate an reverse engineer on this one - i will send you an private message to discuss better

[joaomirandas]

might need to skype call/remote desktop one of you to reverse engineer this one.

Meet-me at Telegram to better discuss: https://t.me/liveapps

[smashah]

Join discord:

https://discord.gg/uk5mbn

[smashah]

@andersondeoliveiramachado @joaomirandasa let me know once you've joined my tag is @ shah

[joaomirandas]

Degug information about new message type:

template_button.txt

[smashah]

thanks @joaomirandasa

The questions are of type template. They can also have subtypes (i.e the body of the questions). Also the buttons themselves have subtypes (i.e the action performed in response to the question) as seen below in the WhatsApp app code.

This means that you can send a user a picture and then show a button to start a call. Wild stuff.

[andersondeoliveiramachado]

https://wa.me/5511955705173?text=Ol%C3%A1,%20UAM!

this is the college whatsapp link that has this business account with this button feature.

[andersondeoliveiramachado]

[smashah]

I've managed to construct this message properly however, unfortunately, the message gets 'dropped'.

[andersondeoliveiramachado]

I've managed to construct this message properly however, unfortunately, the message gets 'dropped'.

most likely to have validation by account type. This account is a business account.

is some kind of message returned in this sense? or simply do not have shipping or return?

[joaomirandas]

@smashah Could you give me more information about the drop? witch kind of account did you used to test, an Business or personal account?

Probably this just can be sent from WBusiness and searching aboout informations of that previous number we realize it's not an verified account - so probably they are using an 3rd party solution provided by someone else, at this moment me and @andersondeoliveiramachado
are searching more possible informations about provider of api solution used for them

[smashah]

I fixed the drop. It doesn't come out the other end with the buttons though.

[marcelocecin]

https://developers.facebook.com/docs/whatsapp/business-management-api/message-templates/
https://developers.facebook.com/docs/whatsapp/api/messages/message-templates/media-message-templates/
https://developers.facebook.com/docs/whatsapp/message-templates/
https://developers.facebook.com/docs/whatsapp/message-templates/guidelines/
https://developers.facebook.com/docs/whatsapp/message-templates/creation/
https://developers.facebook.com/docs/whatsapp/message-templates/sending/
https://developers.facebook.com/docs/whatsapp/message-templates/localization/
https://www.facebook.com/business/partner-directory/search?platforms=whatsapp&solution_type=messaging&sort_by=alpha

https://github.com/Rhymen/go-whatsapp/blob/master/binary/proto/def.proto

message TemplateMessage {
    optional ContextInfo contextInfo = 3;
    optional HydratedFourRowTemplate hydratedTemplate = 4;
    oneof format {
        FourRowTemplate fourRowTemplate = 1;
        HydratedFourRowTemplate hydratedFourRowTemplate = 2;
    }
}

[smashah]

This is the blocker:

If it detects that you're trying to send a template with a subtype:text then it converts it to a type:chat then parses it again. I believe that if this can be bypassed then the buttons would go through properly.

[smashah]

@andersondeoliveiramachado @joaomirandasa @marcelocecin have a play around in the chrome console.

https://github.com/smashah/sulla/blob/a9b94acd08ca4067f13eb0bd926ce1d257b7bdcc/src/lib/wapi.js#L1689

I can't get this to work 🤷

[andersondeoliveiramachado]

Is it possible to test with any type of account?

[smashah]

I've tested with both business and personal and it changes into a normal chat during sending. Doesn't work on either as expected. The only thing left to do is to mutate the app code somehow. I don't know how to do that

[marcelocecin]

@andersondeoliveiramachado could you try to share the message with another number on whatsapp web and attach the prints?

[andersondeoliveiramachado]

[joaomirandas]

I tried to share message with another number, buttons simply disapear! i don't know why but isn't work as expected.

[andersondeoliveiramachado]

could you try to share the message with another number on whatsapp web and attach the prints?

Yes , what is the number?

[smashah]

tiny update

[smashah]

try this in the browser:

https://github.com/smashah/sulla/blob/82ee145b9d83222aa506ff3bfc72a9aacd9164da/src/lib/wapi.js#L1692

I think this is as close as i'm gonna get for now.

[devdouglasonofre]

Wow! Sulla is envolver faster than i thought. Great to see this. Soon I'll test the button's features.

Also... Looks like brazilian people loves Sulla. I have never seen an non-brazilian repository with so many brazilians interacting.

Beijos do Brasil!

[joaomirandas]

Thanks @open-wa for so engagement on discover and reproduce this features! Amazing to see this project growing every day.

Regards from Brazil! Come here to drink a beer!

[smashah]

Bruh

[smashah]

[ImBIOS]

how to approach this? @smashah

[smashah]

@ImBIOS with excitement.

Keep an eye on this issue. This feature will be releasing soon

[smashah]

@github-actions run

⚡ Release! ⚡

(async () => {
function exec(cmd) {
  console.log(execSync(cmd).toString());
}

// Config
const gitUserEmail = "github-actions[bot]@users.noreply.github.com";
const gitUserName = "github-actions[bot]";

exec(`echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc`);
exec(`git config --global user.email "${gitUserEmail}"`);
exec(`git config --global user.name "${gitUserName}"`);
exec(`npm i -D`);
exec(`npm run release-ci minor`);

//comment on the issue
var result = execSync(`npx auto-changelog -o ./tempchangelog.txt --commit-limit false --template ./compact-keepachangelog.hbs --stdout`).toString();

    await postComment(result);

//create changelog image
exec(`npm run release-image`);
exec(`git commit -a -m 'updated release-image'`);
exec(`git push --force`);
  })();

[smashah]

Changelog

🚀 Release 4.11.0 (2021-07-15)

• Release 4.11.0 e09237a
• 📝 docs fix a36a702
• ✨ feat [INSIDERS]: sendListMessage list message #1903 106a43d
• ✨ feat: sendButtons WhatsApp Buttons #98 c075eee
• ✨ feat: sendBanner Request : add thumbnail in sendLocation #1793 7398172
• 🥚 patches update cdbf6c3

[smashah]

It took 1.5 years but finally, it's here. I'm proud to announce you can finally send simple button messages with open-wa (limit is 3 buttons)

await client.sendButtons(chatId, "Body", [
        {
            id: "1",
            "text": "Click"
        },
        {
            id: "1",
            "text": "Call"
        },
        {
            id: "1",
            "text": "Open Link"
        }
    ], "title", "footer")

result:

@andersondeoliveiramachado @tinyCoder32 @m7mdcc @joaomirandasa

closing. thanks

[m7mdcc]

Salam @smashah , Great Job .. 3 buttons is limit ? could we send more ? finaly YOU DID IT HEHEHE

[smashah]

Ws @m7mdcc I tried with 4 and more but it only ever showed three. That's the limit from wa

[mrbarnk]

tiny update

How can I style the buttons like this? The icon and the arrangement.

[smashah]

@mrbarnk these are special buttons (url & call). They are still not available for use outside the official API.

I tested these types of buttons recently before releasing normal buttons for the library and it still comes up in the chat as if it was sent by the recipient.

I doubt we'll ever get access to these special buttons.

[mrbarnk]

Oh! Well, Kudos on this normal button alone.

[sparrow-code]

It took 1.5 years but finally, it's here. I'm proud to announce you can finally send simple button messages with open-wa (limit is 3 buttons)

await client.sendButtons(chatId, "Body", [
        {
            id: "1",
            "text": "Click"
        },
        {
            id: "1",
            "text": "Call"
        },
        {
            id: "1",
            "text": "Open Link"
        }
    ], "title", "footer")

result:

@andersondeoliveiramachado @tinyCoder32 @m7mdcc @joaomirandasa

closing. thanks

But This Command And Function dosn't giving response and nor showing any error

[smashah]

@sparrow-code it is working fine here. Log the output of that command it to check if it returns a message id.

[ivenkatraj]

@smashah I read the isues. But how to create the whatsapp button with the program you mentioned here please please explain step by step process. I don't know how tho run this. Would be bery much happy if you could explain this. Please.