Dynamic initialization

[galina-osenina]

We would like to add and remove stories dynamically. Now we are trying to call new Bubbles() with an updated config every time the array of stories is changed. But the gobi-container remains unchanged. Is it possible to reinit it?

[gobi-darren]

Hi galina-osenina,

Currently you can change the bubbles by replacing the container that's hosting the bubbles.

For example:

<div id="bubbles"></div>
<script>
  const config = {
    container: '#bubbles',
    bubbleSize: '120px',
    color: '#BD00FE',
    animatedBubble: true,
    playerOptions: {
      autoStartWithSound: true
    },
  };

  // Create initial bubbles
  var bubbles = new gobi.Bubbles(Object.assign(config, {
    stories: [{ id: 'k85k5' }]
  }));

  // Set a 3 second timer for demonstration
  setTimeout(() => {
    // Replace with new bubbles
    let oldContainer = bubbles.container;

    bubbles = new gobi.Bubbles(Object.assign(config, {
      container: document.createElement('div'),
      stories: [{ id: 'zt4kt' }]
    }));

    oldContainer.replaceWith(bubbles.container);
  }, 3000);
</script>

[galina-osenina]

Hi gobi-darren! I tried and it works, thank you!