如何通过按钮点击触发DocuSign Clickwrap弹窗？

你现在的问题是代码在页面加载时就自动渲染了Clickwrap，只需把渲染逻辑绑定到按钮的点击事件上即可，同时可以加个小处理避免重复渲染。

修改后的完整代码如下：

<button id="ds-click">click me</button>

<div id="ds-clickwrap" style="display:none;"></div>

<script src="https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js"></script>
<script>
  // 标记是否已渲染，避免重复点击重复加载
  let isClickwrapRendered = false;
  const clickButton = document.getElementById('ds-click');
  const clickwrapContainer = document.getElementById('ds-clickwrap');

  clickButton.addEventListener('click', () => {
    if (isClickwrapRendered) return;
    
    docuSignClick.Clickwrap.render({
      environment: 'https://demo.docusign.net',
      accountId: 'XXXXXXXXXXXXXXXXXXXXXXXX',
      clickwrapId: 'XXXXXXXXXXXXXXXXXX',
      clientUserId: '4x-2x4',
      documentData: {
        fullName: 'jason',
        email: 'jasion1243@gmail.com',
        company: 'xyz',
        title: 'Backend-Developer',
        date: '19/02/2023'
      },
      // 可选：渲染完成后显示容器并标记已渲染
      onRender: () => {
        clickwrapContainer.style.display = 'block';
        isClickwrapRendered = true;
      }
    }, '#ds-clickwrap');
  });
</script>

关键改动说明： #

• 移除了页面加载时自动执行的render调用，把它移到按钮的点击事件回调函数里
• 增加了isClickwrapRendered变量，防止用户多次点击按钮重复加载Clickwrap
• 给容器#ds-clickwrap初始设置display:none隐藏，在渲染完成的回调onRender里再显示出来（也可以根据需求调整显示时机）
• 通过addEventListener给按钮绑定点击触发逻辑

这样用户点击按钮时才会初始化并渲染DocuSign Clickwrap界面，不会再页面加载时自动显示。

内容的提问来源于stack exchange，提问作者Jason Perry