如何正确嵌入 UpViral 小部件(分步教程)

已发表: 2022-04-17

UpViral 与 Vyper、Viral Loops、Kingsumo 和 Gleam 等其他在线赠品软件不同的主要功能之一是可用的可嵌入选项的广泛性。

事实上,有很多方法可以将 UpViral 小部件嵌入网站。 但是,如果您发现很难在您的网站上显示 UpViral 赠品,或者 UpViral 小部件的加载速度没有您需要的那么快,那么本教程将对您有所帮助。

嵌入向上病毒

UpViral 可嵌入选项

UpViral 提供四种不同的方式将 Upviral 嵌入您的网站。

  1. 标准
  2. 弹出窗口
  3. 弹出框
  4. HTML 表单

如果您想使用自己的登录页面而不是 UpViral 托管页面,标准方法是完美的。 如果您想将 UpViral 竞赛整合到现有的潜在客户漏斗中,这是一个完美的选择。

如果您创建了一个常青的奖励计划并希望使用您的博客流量来维护比赛漏斗,那么 Popup 和 Popovers 是很好的选择。

HTML 表单用于通过 HTML 表单集成方法与现有登录页面和潜在客户捕获工具集成。

标准方法

第一个也是最受欢迎的 UpViral 安装选项是标准。 现在 UpViral 支持从您的编辑器自定义标准小部件的独特外观。 请参阅下面的屏幕截图以供参考。

编辑-upviral-widget-editor

因此,您可以更改小部件并决定在小部件上显示和隐藏什么。 完成小部件设计设置和活动准备后,您可以在您的网站上嵌入 UpViral 小部件。

设置

从“选择加入小部件设置”下的列表中选择“标准”选项。 您可以从此处定义小部件宽度。 UpViral 小部件是移动响应的。 但是,您可以根据需要在桌面视图中指定要展示的数字。

标准小部件嵌入向上病毒

接下来,您必须设置“共享小部件”。 如您所见,有两种选择。

  1. 共享小部件显示在同一页面上,而不是选择加入小部件(刷新)
  2. 重定向到将嵌入共享小部件的以下 URL

两种选择都有其优势。 例如,如果您的渠道没有潜在客户捕获选项,则第一种方法很有用。 它特别用于已经通过其他方式捕获潜在客户的区域。 第二个选项是两个选项中最受欢迎的选项。 如果您的渠道同时具有潜在客户捕获和感谢页面,那么这是您必须选择的选项。

提示:

如果您想将参与者发送到托管在 UpViral 服务器上的共享页面,只需在“重定向到将嵌入共享小部件的以下 URL”字段下输入 UpViral 共享页面 URL。

您的感谢页面网址将类似于:https: //upvir.al/1234567/Thanks/CampaignName

第三步是定义推荐流量的去向。

upviral-embed-campaign-widget 设置

它提供了两种选择:

  1. Upviral 托管的选择加入页面
  2. 将嵌入选择加入小部件的网站

两者都有其优点和缺点。 如果使用第一个选项,您可以灵活地拆分测试选择加入页面并轻松优化渠道。 如果要将推荐流量发送到您指定的页面,则第二种方法是完美的。

在安装的第四步中,将为您提供两个代码片段。

upviral-standard-widget-embed-code

安装

UpViral 小部件无法在大多数网站上加载的主要原因之一是 UpViral 脚本无法加载。 要修复它,您必须在网页顶部加载 Upviral.js。

复制主要的 UpViral 嵌入代码。

 <script language="javascript" src="https://snippet.upviral.com/upviral.js"></script>

将其插入您网站的 head 标签之间。 如果您使用 WordPress,您可以使用 Google Tag Manager 安装脚本或使用脚本管理器插件。

现在将 iframe HTML 代码和其他脚本代码粘贴到您要显示 Standard UpViral 小部件的位置。

弹出窗口

如果您有一个接收流量的网站,那么弹出窗口小部件类型可能会真正改变您的业务。 因为,通常情况下,弹出窗口的潜在客户转化率更高。 因此,如果您可以在 UpViral 上建立一个非常好的竞赛漏斗,Pop-up 可以使其成为病毒式传播。

设置弹出窗口

UpViral 允许您以多种方式设置弹出窗口小部件。

弹出-upviral-widget-opt-in-settings
  • 背景不透明度允许您控制小部件前景的透明度。
  • 启用或禁用页面加载时弹出的外观
  • 启用/禁用弹出窗口的关闭图标
  • 定义如果访客为访客关闭,应隐藏多少天

共享小部件和推荐流量控制选项与标准小部件相同,您可以在其中指导在哪里显示小部件并发送流量。

安装弹出窗口

向上病毒弹出代码

您将获得类似于下面的 HTML 代码。 它基本上可以让您将按钮或链接转换为号召性用语,一旦单击就会显示弹出窗口。

 <a href="#uvembed123584">click here to open popup</a>

我建议将 UpViral 外部 Javascript 代码放在 head 标记内,以毫无问题地加载 UpViral 弹出窗口。

弹出框

最近添加的小部件类型是 Popover。 它使您可以在您的网站上显示聊天小部件样式的小部件。

设置弹出框

UpViral Popover 设置可让您自定义小部件的外观及其显示方式。

upviral-popover-widget-optin 设置
  • 在“按钮标题”下输入引人注目的 CTA 文本。 例如:单击此处赢取夏威夷 5 日游
  • 自定义按钮 CTA 颜色和图标
  • 选择首选的弹出框模式。 您可以将弹出框设置为在某个时间后默认显示,也可以将其关闭。 如果它设置为关闭,则用户必须单击小部件才能打开它。

安装

弹出窗口小部件脚本可以插入到 </body> 标记上方,因为我们希望在小部件之前加载其他内容。

upviral-popover-安装脚本

HTML 表单

HTML 表单代码可让您将 UpViral 与 UpViral 目前没有原生集成的其他平台和在线工具集成。

这是我在 Convertful 表单构建器中使用 HTML 表单集成的示例。

自定义字段数据传输转换选项

ConvertBox 是另一个潜在客户捕获工具,可让您通过 HTML 表单集成方法连接工具。

convertbox-html-form-integrations

UpViral 的 HTML 表单使用 HTTPS POST 方法。 如果您的表单构建器或登录页面构建器不支持 UpViral,您可以使用表单的 HTML 代码轻松集成。

upviral-html-form-code

为什么 UpViral 嵌入式小部件无法加载?

主要原因有两个:

  1. UpViral 脚本没有显着加载
  2. 其他脚本或插件与 UpViral 脚本冲突

最好的情况是在 <head> HTML 元素中插入UpViral.js脚本,并在其他元素之前加载 UpViral 小部件。

可嵌入的 UpViral 推荐小部件

现在,您可以让您的比赛参与者在他们的网站上显示 UpViral 选择加入小部件,并在有人通过安装在他们网站上的小部件注册时获得推荐积分。 从这里联系查马尔了解更多详情。

upviral-referral-widget-example

你有什么问题吗?

在本教程中,您学习了如何以正确的方式嵌入 UpViral 小部件。 如果您有任何问题,请在下面发表评论,我会尽我所能提供帮助。

另请阅读:Top UpViral 集成以促进您的活动成功