Trigger popup from anchor tag in URL

Hello Baddie,

I am sorry for the trouble you have with our plugin. The script you pasted above runs before the contact popup is set up. Try replacing the code with the following:

// Run code as soon as all Areas/Popups are initialized.

DiviArea.addAction(‘ready’, function() {
// Find an Area that matches the current URLs #hash.
var area = DiviArea.getArea(window.location.hash);
// When an Area with that name exists, show it instantly.
if (area) DiviArea.show(area);
});

That’s a general solution that takes any #hash value from the URL and opens the Popup, when there’s a Popup with that name. Feel free to get back to me, in case of any question.

Regards,
Syed

Ok, I’ve done what you suggested. However, var area = DiviArea.getArea(window.location.hash); returns false and the popup does not launch.

I also removed the ‘#’ part from the window.location.hash value since the other Popups for Divi functions don’t use the ‘#’ part in the identifier

var id = window.location.hash.substr(1);
var area = DiviArea.getArea(id);

But this also returns false and the popup does not launch.

I also tried it explicitly…

if (window.location.hash == '#contact') {
  var area = DiviArea.getArea('contact');

But this also returns false and the popup does not launch.

• This reply was modified 4 years, 2 months ago by Baddie.
• This reply was modified 4 years, 2 months ago by Baddie.

Hi @baddiedev

Thanks for the additional details! You say that DiviArea.getArea("contact") returns false. That means, that there is no initialized Popup with the ID “#contact” on that page (yet).

You can double-check to see a list of valid Popup IDs by running DiviArea.listAreas() on the page. That command returns an array with all Popup IDs that are present on that page and.

Here’s a slightly modified version of the JS snippet that outputs console logs with additional details for you:

<script>
// Run code as soon as all Areas/Popups are initialized.
DiviArea.addAction('ready', function() {
  console.log('Popups for Divi is ready!');

  if (!window.location.hash) {
    console.log('URL does not contain a hash, do nothing');
    return;
  }

  console.log('Try to open the Popup', window.location.hash);

  // Find an Area that matches the current URLs #hash.
  var area = DiviArea.getArea(window.location.hash);

  // When an Area with that name exists, show it instantly.
  if (area) {
    console.log('Found a Popup, display it now');
    DiviArea.show(area);
  } else {
    console.log('Did not find a Popup with the ID', window.location.hash);
    console.log('Available Popups:', DiviArea.listAreas());
  }
}, 20); // ← The "20" parameter was missing in our the last reply! 
</script>

Please note the last line in the script, which contains the parameter , 20 – when this parameter is missing, the script will not work (and I think that’s the reason for the problem in your last attempt; we forgot to tell you about that param…)

The “20” is the priority of the action (same as WordPress, higher priority means later execution). When running the function without the priority param, then the script assumes priority “10”, which is too early. Setting this param to “20” will call your initialization function a little bit later, which possibly solves the issue.

Let us know how that worked, I’m looking forward to your feedback!

Thanks, Philipp ??

• This reply was modified 4 years, 1 month ago by Philipp Stracker.

Excellent! Thanks very much! The 20 parameter made all the difference. The code I’m now using is

DiviArea.addAction('ready', function() {
  if (!window.location.hash) return;
  var area = DiviArea.getArea(window.location.hash);
  if (area) DiviArea.show(area);
}, 20);

Note for others: This code will in fact autolaunch any popup on the page whose ID appears in the URL as the hash. For a more targetted approach, allowing only specific popups to auto launch you can use something like

DiviArea.addAction('ready', function() {
  var ids = ["#foo", "#bar", "#baz"]; // Array of popup IDs that are allowed to autolaunch
  var hash = window.location.hash; 
  if (!hash || !ids.includes(hash)) return;
  var area = DiviArea.getArea(hash);
  if (area) DiviArea.show(area);
}, 20);

[Deleted comment due to Power Of Posting]

• This reply was modified 4 years, 1 month ago by tracian.

@tracian I guess that you could solve your issue (that’s why you deleted the comment). For anyone else who arrives here and needs help to build some custom JS:

Yay ?? We love JS-API-power-users like you! That’s why we have created a script generator to help you create working snippets. You can find it here – it’s fully compatible with Popups for Divi
https://divimode.com/knowledge-base/divi-areas-script-generator/

In case you have any questions, please get in touch via this forum, or request support via https://divimode.com/get-support/

Happy Popup-ing ?? Philipp