No results found. Try again with different words?

Search must be at least 3 characters.

Display a dialog when the user approves an image

Sometimes it’s useful to display some information after the user approves an image. Perhaps you simply want to let them know that you’ve received their approval and will be in contact.

First you’ll want to create a new blank javascript file. Let’s call it my-user-approves-image.js. Inside the file, we’ll add this code:

<?php

add_action('wp_enqueue_scripts', function () {
	wp_add_inline_script('project-huddle', "
	/**
	 * Hook into Approve Button View initialize method
	 */
	ph.api.hooks.addAction('ph.api.views.ApproveButton.initialize', 'custom-popup', function (view) {
		view.messageAfterApproval();
	});
	
	/**
	 * Extend the original approve button view
	 * Here we can add our own functions, events, whatever we like.
	 */
	_.extend(ph.api.views.ApproveButton.prototype, {
		// add message function
		messageAfterApproval: function () {
			this.listenTo(this.model, 'change:approval', function () {
				// (optional) only display on approval
				if (this.model.get('approval')) {
					vex.dialog.confirm({
						message: 'Thanks! Could you please leave us a review?',
						callback: function (value) {
							if ( value )  {
								window.location.href = 'http://google.com';
							}
						}
					});
				}
			});
		}
	});
	");
}, 9999999);

Here we’re hooking into the approve button view’s initialize function and listening for the successful approval event. When an image is successfully approved, we’ll show a dialog box (using the  Vex plugin) with our custom message. 

Then, add your script to the  SureFeedback Project page to add this to your projects.

Was this article helpful?


Did not find a solution? We are here to help you succeed.

Display a dialog when the user approves an image

Sometimes it’s useful to display some information after the user approves an image. Perhaps you simply want to let them know that you’ve received their approval and will be in contact.

First you’ll want to create a new blank javascript file. Let’s call it my-user-approves-image.js. Inside the file, we’ll add this code:

<?php

add_action('wp_enqueue_scripts', function () {
	wp_add_inline_script('project-huddle', "
	/**
	 * Hook into Approve Button View initialize method
	 */
	ph.api.hooks.addAction('ph.api.views.ApproveButton.initialize', 'custom-popup', function (view) {
		view.messageAfterApproval();
	});
	
	/**
	 * Extend the original approve button view
	 * Here we can add our own functions, events, whatever we like.
	 */
	_.extend(ph.api.views.ApproveButton.prototype, {
		// add message function
		messageAfterApproval: function () {
			this.listenTo(this.model, 'change:approval', function () {
				// (optional) only display on approval
				if (this.model.get('approval')) {
					vex.dialog.confirm({
						message: 'Thanks! Could you please leave us a review?',
						callback: function (value) {
							if ( value )  {
								window.location.href = 'http://google.com';
							}
						}
					});
				}
			});
		}
	});
	");
}, 9999999);

Here we’re hooking into the approve button view’s initialize function and listening for the successful approval event. When an image is successfully approved, we’ll show a dialog box (using the  Vex plugin) with our custom message. 

Then, add your script to the  SureFeedback Project page to add this to your projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

LET’S GET STARTED

Ready to Give It a Try?

Start Your Free 14-Day Trial Now. No Obligation. No Reason Not To.

Trial Icon

14 Days Free Trial

Experience Our Platform Risk-Free

Docs Icon

Documentation

Articles that cover common questions

24/7 World Class Support Team

Friendly Support

Reach Out – We’re Here to Help

Scroll to Top