Create a pop-up bubble that can be moved and removed

New Member
6 0 0

Does anyone know about an app(or script) that creates a bubble that pops out (like a slide-in), that I can use to direct people to wherever I want?

The bubble should be customizable with an image and be moveable so if it's in the way for the customer, they can move and REmove it.

Kind of like the yellow bubble on this page https://www.bog-ide.dk/

I know what program they use and its more than 200$ pr month so thats not an option

 

Kind regards

 

Bruno Poulsen
https://www.MamaMilla.dk 

 

Bruno

MamaMilla

0 Likes
Excursionist
23 4 6

Hello!
What they have on their website can be achieved using following code. 
Say we have a button, 

  <div id="button">
      <a href='#'>DRAG ME</a>
  </div>

its always on the top, left side. 

#button {
    position: fixed;
    height: 40px;
    width: 80px;
    border: 4px solid #B20000;
    background-color: #FF0000;
    color: #FFFFFF;
    box-shadow: 5px 5px 5px #888;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
    line-height: 35px;    
    margin: 0 auto;
    top:30px;
    left: 20px;
}

#button a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    position: relative;
}

Use jquery draggable(); so it can be moved over screen but when you release it. It goes to the left side always.

 

$(document).ready(function() {
  $('#button').draggable();
  
  var isDragging = false;
  $("#button")
  .mousedown(function() {
      isDragging = false;
  })
  .mousemove(function() {
      isDragging = true;
   })
  .mouseup(function() {
      var wasDragging = isDragging;
      isDragging = false;
      if (!wasDragging) {
          $("#button").css({"left": "20px", "font-size": "200%"});
      } 
      else {
          $("#button").css({"left": "20px"});
      } 
  });
});

 

Now you can add any container and create a show() hide() function on click event using jquery. 

I hope it helps.

Best,

 

 

Want to modify or custom changes on store hire me.
If my answer is helpful, Please Like and Accept Solution.
Buy me a coffee
1 Like
New Member
6 0 0

Hi Amaisbajwa

 

Thanks for getting back to me!

 

Sounds like you know what you are doing! Will this go back to the same place or can it be placed all along the left side?

 

Is it possible to create a bin function to remove the button if the visitor dont want it there?

 

Also, can I change the text and the image of the button from this code? 

 

What would this cost if I needed someone to set this up for me?

0 Likes
Excursionist
23 4 6

Hi,

 

It will go back to all the way left, just like the example site. 

you can have a cross icon on hover for users to hide that 'bubble', you can assign a cookie for a certain time, like 1 day or a week.

You can add text and image to button. just change <button></button> to <div id="popout"><img src=""/></div>

 

How much it would cost?? It depends, how complex catalog layout is, developer rates, etc. 
DM me for more details


Best, 

 

Want to modify or custom changes on store hire me.
If my answer is helpful, Please Like and Accept Solution.
Buy me a coffee
0 Likes