âš¡Voxel Black Friday Sale is now Live

Voxel Popup Logout Confirmation

Description/Instructions

CREDIT: Oli Ver.

This logout confirmation popup should be native in voxel for sure! This is a great UX for confirming when a user wants to log out.
See it in action on The Voxel Guide.

If this snippet helped, feel free to buy me a taco :)

Instructions

This goes under functions.php on your child theme.

function custom_logout_without_confirmation() {
if (isset($_GET['appout'])) {
wp_logout();
wp_redirect(home_url());
exit();
}
}
add_action('init', 'custom_logout_without_confirmation');

  • PHP
Copy Code

Instructions

This goes in the URL field of any button or wordpress menu item.

?appout=true

  • HTML
Copy Code

Instructions

Add this using the FluentSnippets plugin (free) to add to the header so it works on all pages OR add it to the HTML element on the page you have the log out button on.

window.addEventListener("load", function () {

document.addEventListener("click", function (e) {
var link = e.target.closest('a[href*="?appout=true"]');

if (link) {
// prevent the default link behavior
e.preventDefault();

// Check if Voxel is defined and show the alert
if (typeof Voxel !== "undefined") {
Voxel.alert("Would you like to log out?", "info");

// Wait until the DOM is updated with the alert box
setTimeout(function () {
// Find the close alert button and customize it
var closeAlertBtn = document.querySelector(
".ts-btn.ts-btn-4.close-alert"
);

if (closeAlertBtn) {
closeAlertBtn.textContent = "Log out now";

closeAlertBtn.addEventListener(
"click",
function (event) {
event.preventDefault();
window.location.href =
link.getAttribute("href");
}
);
}
}, 0);
}
}
});

});

  • JS
Copy Code

Let's Chat About this Snippet