How can I auto-click a 'onesignal' button when page load? I'm trying with javascript and jquery codes but it is not working.

First codes is here when page load..

<div id="onesignal-bell-launcher" class="onesignal-bell-launcher onesignal-bell-launcher-md onesignal-bell-launcher-bottom-right onesignal-bell-launcher-theme-default onesignal-bell-launcher-active">
    <div class="onesignal-bell-launcher-button">
        <!--?xml version="1.0" encoding="utf-8"?-->
        <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
        <svg version="1.1" class="onesignal-bell-svg" xmlns="" xmlns:xlink="" x="0px" y="0px" width="99.7px" height="99.7px" viewBox="0 0 99.7 99.7" style="filter: drop-shadow(0 2px 4px rgba(34,36,38,0.35));; -webkit-filter: drop-shadow(0 2px 4px rgba(34,36,38,0.35));;" xml:space="preserve">
            <g>
                <circle class="background" cx="49.9" cy="49.9" r="49.9"></circle>
                <g id="Layer_2">
                    <g>
                        <path class="foreground" d="M50.1,66.2H27.7c0,0-2-0.2-2-2.1c0-1.9,1.7-2,1.7-2s6.7-3.2,6.7-5.5c0-2.3-1.1-3.9-1.1-13.3
                            s6-16.6,13.2-16.6c0,0,1-2.4,3.9-2.4c2.8,0,3.8,2.4,3.8,2.4c7.2,0,13.2,7.2,13.2,16.6s-1,11-1,13.3c0,2.3,6.7,5.5,6.7,5.5
                            s1.7,0.1,1.7,2c0,1.8-2.1,2.1-2.1,2.1H50.1z"></path>
                        <path class="foreground" d="M42.9,68.5h14.5c0,0-1,6.3-7.2,6.3S42.9,68.5,42.9,68.5z"></path>
                        <ellipse class="stroke" cx="49.9" cy="49.9" rx="37.4" ry="36.9"></ellipse>
                    </g>
                </g>
            </g>
        </svg>
        <div class="pulse-ring"></div>
    </div>
    <div class="onesignal-bell-launcher-badge"></div>
    <div class="onesignal-bell-launcher-message">
        <div class="onesignal-bell-launcher-message-body">Lütfen bildirimlere izin veriniz..</div>
    </div>
    <div class="onesignal-bell-launcher-dialog" style="filter: drop-shadow(0px 2px 2px rgba(34,36,38,.15));; -webkit-filter: drop-shadow(0px 2px 2px rgba(34,36,38,.15));;">
        <div class="onesignal-bell-launcher-dialog-body">
            <h1>Site bildirimlerini yönet</h1>
            <div class="divider"></div>
            <div class="push-notification">
                <div class="push-notification-icon push-notification-icon-default"></div>
                <div class="push-notification-text-container">
                    <div class="push-notification-text push-notification-text-short"></div>
                    <div class="push-notification-text"></div>
                    <div class="push-notification-text push-notification-text-medium"></div>
                    <div class="push-notification-text"></div>
                    <div class="push-notification-text push-notification-text-medium"></div>
                </div>
            </div>
            <div class="action-container">
                <button type="button" class="action" id="subscribe-button">TAKİP ET</button>
            </div>
            <div class="divider"></div>
            <div class="kickback">Powered by <a href="" class="kickback" target="_blank">OneSignal</a></div>
        </div>
    </div>
</div>

And second button is open when First button is clicked

<div class="action-container">
    <button type="button" class="action" id="subscribe-button">TAKİP ET</button>
</div>

How can I auto-click a 'onesignal' button when page load? I'm trying with javascript and jquery codes but it is not working.

First codes is here when page load..

<div id="onesignal-bell-launcher" class="onesignal-bell-launcher onesignal-bell-launcher-md onesignal-bell-launcher-bottom-right onesignal-bell-launcher-theme-default onesignal-bell-launcher-active">
    <div class="onesignal-bell-launcher-button">
        <!--?xml version="1.0" encoding="utf-8"?-->
        <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
        <svg version="1.1" class="onesignal-bell-svg" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px" width="99.7px" height="99.7px" viewBox="0 0 99.7 99.7" style="filter: drop-shadow(0 2px 4px rgba(34,36,38,0.35));; -webkit-filter: drop-shadow(0 2px 4px rgba(34,36,38,0.35));;" xml:space="preserve">
            <g>
                <circle class="background" cx="49.9" cy="49.9" r="49.9"></circle>
                <g id="Layer_2">
                    <g>
                        <path class="foreground" d="M50.1,66.2H27.7c0,0-2-0.2-2-2.1c0-1.9,1.7-2,1.7-2s6.7-3.2,6.7-5.5c0-2.3-1.1-3.9-1.1-13.3
                            s6-16.6,13.2-16.6c0,0,1-2.4,3.9-2.4c2.8,0,3.8,2.4,3.8,2.4c7.2,0,13.2,7.2,13.2,16.6s-1,11-1,13.3c0,2.3,6.7,5.5,6.7,5.5
                            s1.7,0.1,1.7,2c0,1.8-2.1,2.1-2.1,2.1H50.1z"></path>
                        <path class="foreground" d="M42.9,68.5h14.5c0,0-1,6.3-7.2,6.3S42.9,68.5,42.9,68.5z"></path>
                        <ellipse class="stroke" cx="49.9" cy="49.9" rx="37.4" ry="36.9"></ellipse>
                    </g>
                </g>
            </g>
        </svg>
        <div class="pulse-ring"></div>
    </div>
    <div class="onesignal-bell-launcher-badge"></div>
    <div class="onesignal-bell-launcher-message">
        <div class="onesignal-bell-launcher-message-body">Lütfen bildirimlere izin veriniz..</div>
    </div>
    <div class="onesignal-bell-launcher-dialog" style="filter: drop-shadow(0px 2px 2px rgba(34,36,38,.15));; -webkit-filter: drop-shadow(0px 2px 2px rgba(34,36,38,.15));;">
        <div class="onesignal-bell-launcher-dialog-body">
            <h1>Site bildirimlerini yönet</h1>
            <div class="divider"></div>
            <div class="push-notification">
                <div class="push-notification-icon push-notification-icon-default"></div>
                <div class="push-notification-text-container">
                    <div class="push-notification-text push-notification-text-short"></div>
                    <div class="push-notification-text"></div>
                    <div class="push-notification-text push-notification-text-medium"></div>
                    <div class="push-notification-text"></div>
                    <div class="push-notification-text push-notification-text-medium"></div>
                </div>
            </div>
            <div class="action-container">
                <button type="button" class="action" id="subscribe-button">TAKİP ET</button>
            </div>
            <div class="divider"></div>
            <div class="kickback">Powered by <a href="https://onesignal." class="kickback" target="_blank">OneSignal</a></div>
        </div>
    </div>
</div>

And second button is open when First button is clicked

<div class="action-container">
    <button type="button" class="action" id="subscribe-button">TAKİP ET</button>
</div>

• javascript
• php
• jquery
• wordpress
• onesignal

• please be more elaborate when you are asking questions .. for how to ask good question please read stackoverflow./help/how-to-ask – Dhaval Commented May 13, 2016 at 7:08
• @serhatgksu: Were you happy with answer or looking for something else? – Parag Bhayani Commented Jul 15, 2016 at 9:58
• I want onesignal to automatically prompt the user to subscribe when they visit my website. How to do it? – Ankit Commented Mar 2, 2017 at 3:45
• You can view a Onesignal plugin for wordpress. He make this. Enable the option Automatically prompt new site visitors to subscribe to push notifications. documentation.onesignal./docs/wordpress wordpress/plugins/onesignal-free-web-push-notifications – Paulo Alexandre Chaves Pinto Commented Mar 2, 2017 at 13:09

5 Answers 5

First, you need to register an onclick event, where callback function has necessary code to add elements, and then fire a click event

$( document ).ready(function() {
     $("#subscribe-button").on("click", function() {
          $(this).parent().append("<div class="action-container"><button type="button" class="action" id="subscribe-button2">TAKİP ET</button></div>")
     });
     $("#subscribe-button").trigger('click');
});

Keep in mind, Here you should have different id to the second button, No 2 HTML could have same ids, If you will try to get element it will give you only first from the DOM

in this case you can use from jQuery. please add new js file in your document and put this code on that:

$( document ).ready(function() {
     $("#ID OF YOUR BUTTON").trigger('click');
});

this code run when loading of your html file pleted and click on button.

Browsers have a built-in popup blocker that prevents new windows from being opened when a page is loaded -- the user must first click a link or button.

Since the OneSignal button opens a popup window, the user must click it themselves for it to work.

Using jQuery you can auto click on button when page load. Try this:

$(document).ready(function() {
     $("#subscribe-button").trigger('click');
});

Unfortunately not work this method. I suppose onesignal may have taken measures. My web sites is http://mucizeguvelik..tr, you can view for see the onesignal button code.