CODEWITHSUNDEEP
javascripthtml
Joey Arnanzo
Joey Arnanzo

Reputation: 349

HTML button click open Manychat bot

I want to make a button in my website to launch Manychat bot

here is the HTML for the button, it used to be email subscribe

<div class="join_the_club_form_con">
<div class="join_the_club_btn open_cl_btn_top">JOIN THE CLUB</div>
<div class="join_the_club_pop open_cl_btn_top_con">
    <i class="fa fa-remove remove_pop_btn"></i>
    <h3 class="pop_head_line">Become a VIP Member for Free</h3>
    <p>Get Creative for Less. Join the Original Stationery VIP Club for free products, discounts, videos and more...</p>
</div>

I want the button to open manychat button when clicked, I tried adding the code by Manychat but didn't work

here is Manychat code

<!-- ManyChat -->
<script src="//widget.manychat.com/180024982377977.js" async="async">
</script> 

<div class="mcwidget-embed" data-widget-id="3462936"></div>

So simply, I want to make the button open ManyChat bot

Upvotes: 0

Views: 1067

Answers (2)

Jake
Jake

Reputation: 330

Set all of them visibility: hidden and subscribe button must look like: <button id=“btn” onclick=“opensub()”>Want to subscribe?</button> then after button is ready we need to make subscribe block or anything you wish. <div id=“sub”>Subscribe</div> <script>function opensub(){document.GetElementById(“sub”).style.visibility=“visible”}</script> this will reveal subscribe window, then make it disappear after clicking again(DIY please)(do same but rename function and change visible to hidden).

PLEASE CHECK IF CODE IS SPELLED RIGHT (I WAS TYPING FROM MY PHONE)

Upvotes: 1

Lirianna
Lirianna

Reputation: 370

You simply add the <script> from Manychat in your HTML where you have your other scripts (usually in the header or at the bottom of the HTML).

Then you add the <div class="mcwidget-embed" data-widget-id="3462936"></div> either instead of the <div class="join_the_club_btn open_cl_btn_top">JOIN THE CLUB</div> and add the classes from the button (join_the_club_btn open_cl_btn_top) OR add it inside it (depending on your CSS).

Hope this helps :)

Upvotes: 1

Related Questions