# Delay Elements - Wistia & Vimeo

## For Wistia Hosted Videos:

{% embed url="<https://www.loom.com/share/96a39856752c44a8b2c022131f9b8f1b?hideEmbedTopBar=true&hide_share=true&hide_title=true&sid=375bc70b-67f1-4e3c-be76-1ce105c9142a?hide_owner=true>" %}

#### **Script:**

{% code overflow="wrap" %}

```javascript
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var button = document.getElementById('PASTE-ELEMENT-ID-HERE-REMOVE-#');
            button.style.display = 'none';
            window._wq = window._wq || [];
            _wq.push({ id: "PASTE-VIDEO-ID-HERE", onReady: function(video) {
                video.bind('timechange', function(time) {
                    if (time >= 600) {
                        button.style.display = 'block';
                    }
                });
            }});
        });
</script>
```

{% endcode %}

#### **Use Case:**

**VSL Pages** - If you have a vsl page, you can delay a button to get qualified appointments/purchases. You would want your viewers/leads to see the video atleast to a point right?

## For Vimeo Hosted Videos:

{% embed url="<https://www.loom.com/share/cefdc4408cb0486cb7ad95ca085efc51?hideEmbedTopBar=true&hide_owner=true&hide_share=true&hide_title=true>" %}

**Copy paste this below script in Code Element in Synamate under the Wistia video.**

This script only works for Vimeo Video.

```javascript
<script> 
  document.addEventListener('DOMContentLoaded', function() {
  function getVimeoID(iframe) {
    var src = iframe.getAttribute('src');
    var match = src.match(/video\/(\d+)/);
    return match ? match[1] : null;
  }

  var iframes = document.querySelectorAll('iframe');

  var targetVideoID = 'PASTE-VIDEO-ID-HERE'; //Enter the video ID

  iframes.forEach(function(iframe) {
    var videoID = getVimeoID(iframe);

    if (videoID === targetVideoID) {
      var player = new Vimeo.Player(iframe);

      var button = document.getElementById('PASTE-BUTTON-ID-HERE-REMOVE-#');
      button.style.display = 'none';

      player.on('timeupdate', function(data) {
        if (data.seconds >= 600) { // Change time here
          button.style.display = 'block';
        }
      });
    }
  });
});

</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.synamate.com/docs/how-to-tutorials/delay-elements-wistia-and-vimeo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.