Development Hackers

Development Hackers is a community of amazing tech enthusiasts

Development Hackers is a community of software developers, no-code makers and DIY enthusiasts getting together to achieve a better and more sustainable future for all.

Create account Log in
Cover image for Perséphone: New landing page and technical questions
Cécile Plaire for Perséphone

Posted on

Perséphone: New landing page and technical questions

Hey DHackers!
I come to give you some news about the Perséphone project 🙂

We just published our landing page! I used Dorik, an affordable and easy to use No-code tool. It was recommended to me because you can inject code easily (unlike Wix for example).

I wanted to link it to some analytic tools and got in touch with Antoine who recently made a post about Plausible. I decided to test this analytics tool for my page. It's even easier to use than Google Analytics, and just as complete for my project. Thanks Antoine for the suggestion!

The landing page is almost done and already quite functional.
However, I'm facing a problem and I need your help :

You probably know this, but victims of domestic violences are very much watched by their abusers. The abuser who catches the victim on such a site would feel threatened and might go into a rage and violence. Our goal is to ensure that victims are exposed to as little danger as possible.

So I would like to add a "leave page urgently" floating button to allow the victim to leave the website (and if possible delete it from their history, but I may be asking for a lot).

Apparently it is not possible to make such a button on Dorik with the No-Code options. So that's where the "inject code" option is useful, except that I don't know exactly how to do it... So here are my questions:

  • How do I make a floating button with CSS?
  • How do I make the button leave the web page? Would it be possible to delete the page from the history too?

Thanks for your help ! And don't hesitate if you have any feedback, suggestions or other ideas to help the victims 🙂

Discussion (13)

Collapse
rayan profile image
Rayan Nait Mazi

For info, anyone can write code in the comments because Development Hackers supports markdown :)
Just wrap your code in three backticks and specify the language like this:



```javascript
const myMethod = (a, b) => {
   return a + b
}
```


And it will output this

const myMethod = (a, b) => {
   return a + b
}
Enter fullscreen mode Exit fullscreen mode

So everyone can easily contribute to the CSS question for example :)

Collapse
rafbis profile image
Raphaël Bismut

Hi Cécile!

That's such a great project, I'm sure it'll be useful to so many victims!

To answer your question, maybe you can give the button an ID and use custom css to give a a fixed positioning:

#floating-button{
position: fixed;
bottom: 20px;
right: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Hope I could help!

Collapse
cecile profile image
Cécile Plaire Author

Thank you Raphaël! I'll try that right now :)

Thread Thread
cecile profile image
Cécile Plaire Author

It works perfectly, thanks a lot for your help :D

Collapse
louc profile image
Loïc Berthelot • Edited on

Hey @cecile 👋
Awesome project you got here 🚀

Concerning
How do I make the button leave the web page? Would it be possible to delete the page from the history too?

Considering that the id of your button is urgent-exit-btn

<script>   
// Make sure your page is fully loaded
window.addEventListener('load', function() {
   // Attach an event listener to your button
   document.getElementById("urgent-exit-btn").addEventListener("click", function() {
     // Close your tab
     window.close()
   });
})
</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
cecile profile image
Cécile Plaire Author

Thanks Loïc, that's super nice of you! I'll try to do that now :)

Collapse
louc profile image
Loïc Berthelot

Keep us updated on your adventure !

Thread Thread
rayan profile image
Rayan Nait Mazi

I just tried it and the emergency exit button sent me to a cooking website hahaha, good plan

Thread Thread
cecile profile image
Cécile Plaire Author • Edited on

Aha, yes 😅 Actually I was trying to do what Loïc said (thank you again Loïc!). It works well while on my phone but doesn't work on my computer and I don't know why... So on your phone it is supposed to just close the page but on your computer it is redirecting to the cooking website aha.
Maybe some of you know why ?

developmenthackers.com/uploads/art...

Thread Thread
louc profile image
Loïc Berthelot

Hey @cecile 👋
Indeed after a bit of research the script doesn't work if the user directly comes from the browser. It works if you open your link from a third party (Instagram/Messenger etc...)

I would recommend that you simply not close the page but changes the webpage to another casual website✊

Ping me if needed 🚀

Thread Thread
cecile profile image
Cécile Plaire Author • Edited on

Oh ok got it! I think I will just redirect to something more basic, like google for example. It will surely load faster than Marmiton. Thanks again for your help :)

Collapse
thomasbnt profile image
Thomas Bnt

Very cool landing page 😁

Collapse
cecile profile image
Cécile Plaire Author

Thank you Thomas 😀