问题

I am stumped, I thought this was straightforward embeds but it doesn't seem so?

我感到困惑，我以为这是直接嵌入的，但似乎不是这样？

I was given these 2 bits of info after I created a pop-up form in Klaviyo.

在我创建了Klaviyo的弹出表单后，我得到了以下两个信息：

1. <div class=“klaviyo-form-FORMID”></div>

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

I am trying to have this buttonImage.png onClick render the Klaviyo form div from my React Component.

我尝试让buttonImage.png被点击时从我的React组件中呈现Klaviyo表单div。

Can anyone assist??

有人可以帮助吗？

here is the trigger:

这是触发器：

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

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

请注意，上述内容是代码部分，不进行翻译。

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

答案1

得分: 1

我在尝试将Klaviyo与我的NextJS应用集成时遇到了相同的问题。我的问题是我忘记在按钮的包装器上附加脚本，如此处所示：https://help.klaviyo.com/hc/en-us/articles/5486899706267。

所以在你的情况下，将是：

// 我在这里使用了 useEffect，但这可以附加在 _app.jsx 或 _document.jsx 的头部，或者调用此 window.onLoad
useEffect(() => {
  const script = document.createElement('script');
  script.src = `https://static.klaviyo.com/onsite/js/klaviyo.js?company_id={PUBLIC_API_KEY}`;
  script.type = 'text/javascript';
  document.getElementById('container').appendChild(script);
}, []);

<ReactComponent>
   <div class="container">
      <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>
  </div>
</ReactComponent>

希望这对你有所帮助。

  // I use useEffect here but this can be appended in the head from the _app.jsx or _document.jsx or call this window.onLoad
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://static.klaviyo.com/onsite/js/klaviyo.js?company_id={PUBLIC_API_KEY}`;
    script.type = 'text/javascript';
    document.getElementById('container').appendChild(script);
  }, []);


<ReactComponent>
       <div class=container>
          <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>
      </div>
 </ReactComponent>