Audio Block Download Link

Description

• adding Download link to Audio Block
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Hover on page where you use Audio Block > Click Gear icon

#1.2. Click Advanced > Paste this code

<!-- 06.26c28v5 Audio Block Download Link -->
<script>
window.AudioBlockDownloadConfig = {
  blockSelector: ".sqs-block-audio",
  sourceAttr: "data-asset-url",
  iconColor: "#ffffff",
  iconSize: 18,
  strokeWidth: 2,
  rightOffset: 16,
  hoverOpacity: 1,
  baseOpacity: 0.85,
  tooltip: "Download",
  openInNewTab: true,
  reserveSpace: true
};
</script>
<script src="https://code.beaverhero.com/audio/0626c28v5audioblockdownloadlink.js"></script>

#2. Customize

#2.1. To change Download icon size/color, change Line 06, Line 07

iconColor: "#ffffff",
iconSize: 18,

#2.2. To change tooltip text “Download” (text appears on hover Download icon), change Line 12

tooltip: "Download",

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Block under Audio Block

Choose Markdown

Add this code into Markdown

<script>
window.AudioBlockDownloadConfig = {
  blockSelector: ".sqs-block-audio",
  sourceAttr: "data-asset-url",
  iconColor: "#ffffff",
  iconSize: 18,
  strokeWidth: 2,
  rightOffset: 16,
  hoverOpacity: 1,
  baseOpacity: 0.85,
  tooltip: "Download",
  openInNewTab: true,
  reserveSpace: true
};
</script>
<script src="https://code.beaverhero.com/audio/0626c28v5audioblockdownloadlink.js"></script>