如何在React应用中嵌入并触发Klaviyo弹出表单？

问题描述 #

在Klaviyo创建弹出表单后，得到了如下嵌入代码：

<div class="klaviyo-form-FORMID"></div>

想要在React组件中点击buttonImage.png时触发该表单，但当前编写的代码无法正常工作，现有代码如下：

<ReactComponent>
  <div className="klaviyo-form-FORMID">
    <img className="buttonImage" src={process.env.PUBLIC_URL + "/images/ButtonImage.png"} onClick={() => { 
      window._klForms = window._klForms || []; 
      window._klForms.push('FORMID');
      window._klOnsite = window._klOnsite || []; 
      window._klOnsite.push(['openForm', 'FORMID']);
    }} />
  </div>
</ReactComponent>

修复方案 #

1. 确认Klaviyo脚本已加载 #

先确保项目的public/index.html中已引入Klaviyo的onsite脚本（替换YOUR_COMPANY_ID为你的Klaviyo公司ID）：

<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_COMPANY_ID"></script>

这是触发表单的核心前提，没有加载脚本的话，任何API调用都会失效。

2. 调整React组件代码 #

不要将触发图片嵌套在Klaviyo表单的div内，把表单容器单独放在页面中，点击图片时直接调用Klaviyo的API：

import React from 'react';

const FormTriggerComponent = () => {
  const openKlaviyoForm = () => {
    // 兼容脚本未加载完成的情况
    if (window._klOnsite) {
      window._klOnsite.push(['openForm', 'FORMID']);
    } else {
      window._klOnsite = window._klOnsite || [];
      window._klOnsite.push(['openForm', 'FORMID']);
    }
  };

  return (
    <>
      {/* 触发按钮图片 */}
      <img 
        className="buttonImage" 
        src={`${process.env.PUBLIC_URL}/images/ButtonImage.png`} 
        onClick={openKlaviyoForm}
        alt="打开订阅表单"
      />
      {/* Klaviyo表单容器，必须保留在页面中 */}
      <div className="klaviyo-form-FORMID"></div>
    </>
  );
};

export default FormTriggerComponent;

3. 关键注意点 #

• 无需手动调用window._klForms.push()，Klaviyo脚本会自动识别页面上的表单容器
• 触发元素不要嵌套在表单div内，避免干扰Klaviyo的内部逻辑
• 增加脚本存在性判断，防止因脚本加载延迟导致的控制台报错

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