歡迎彈出窗口:7 個示例和如何創建 [指南 + 視頻]

已發表: 2022-08-22

歡迎!

要了解歡迎彈出窗口,查看鼓舞人心的歡迎彈出窗口設計,並獲取有關如何創建它們的教程,只需向下滾動即可。

看看我在那裡做了什麼?

就像這個介紹一樣,歡迎彈出窗口是向您的網站的新訪問者致意的消息。 它還有一個非常重要的目標:將這些新訪問者轉化為訂閱者和客戶。

在這篇文章中,您將找到製作轉換訪問者的歡迎彈出窗口所需的一切:示例、模板、提示和分步創建指南。

轉到部分:

  • 什麼是歡迎彈出窗口?
  • 歡迎彈出窗口示例
  • 如何向任何網站添加歡迎彈出窗口
  • 歡迎彈出提示

什麼是歡迎彈出窗口?

歡迎彈出窗口是訪問者進入網站時出現的消息。 它的目標是吸引新訪問者的注意力並將他們轉化為訂閱者或客戶。

向網站添加歡迎彈出窗口是一種有效的方式來轉換尚未準備好立即購買的訪問者。 這就是為什麼在線企業使用歡迎彈出窗口來構建電子郵件列表,以便以後通過營銷活動來培養他們。 其他流行的用途包括將流量吸引到產品頁面和發布營銷公告。

這是來自電子商務網站的典型歡迎彈出窗口。

歡迎彈出
Igourmet 的歡迎彈出窗口示例

歡迎彈出窗口示例

如果你想要一些靈感,讓我們來看看流行網站上一些令人驚嘆的歡迎彈出窗口設計。 這些示例既美觀又有效,每月轉化多達數千名訪問者。

1.全屏歡迎彈窗

kahoe 示例
  • 網站:尼基·基歐
  • 目標:建立電子郵件列表
  • 獎勵:搶先體驗新產品、獨家優惠、最新消息和現場活動邀請

如果您正在尋找一個鼓舞人心的歡迎彈出窗口,這可能就是那個。 這一個精美地強化了品牌標識和整體優雅的網站氛圍。 看看它——它簡直太美了。

Nickey Kehoe 在打開網站幾秒鐘後顯示其歡迎彈出窗口。 請注意,您可以通過兩種方式關閉彈出窗口(通過單擊進入我們的站點或關閉按鈕)。 此設計決策簡化了關閉彈出窗口的任務,這是保持訪問者體驗積極的好方法。

2. 有折扣的歡迎彈窗

blume 示例
  • 網站:布魯姆
  • 目標:a)建立一個電子郵件列表,b)從首次訪問者那裡產生更多訂單
  • 獎勵: 首單 20% 折扣 + 會員福利(免費送貨和退貨)

一個不錯的歡迎彈出窗口,可為第一個訂單提供折扣。 許多電子商務商店依靠像這樣的主頁歡迎彈出窗口來產生潛在客戶和訂單。

Blume 的這個歡迎彈出窗口轉換了 5% 的網站訪問者,這遠高於 2% 左右的平均彈出窗口轉換率。 理由:慷慨的報價、酷炫的品牌彈出式設計和良好的品牌聲譽。

3. 帶有免費產品樣品的歡迎彈窗

星期天-示例
  • 網站:狗的星期天
  • 目標:通過幫助訪客決定購買來增加銷售額
  • 獎勵:免費產品樣品

Sundays For Dogs 是一家狗糧訂閱公司,它鼓勵新來者嘗試免費的個性化食物樣品。 這是一個很好的營銷策略:免費樣品被證明可以增加食品訂閱業務的銷售額。

當客戶單擊“獲取您的”時,他們會轉到包含示例產品的頁面。 在那裡,他們選擇食譜偏好和訂單——唯一的運費是 5 美元。 由於偏好信息,該企業還收集有用的數據來個性化未來的報價。

4.帶有優惠券代碼的歡迎彈出窗口

  • 網站:蠟燭譫妄
  • 目標:從首次訪問者那裡產生潛在客戶和銷售
  • 獎勵:首次購買的優惠券代碼

個性化優惠券可以獲得潛在客戶,增加訂單價值並推動銷售。 這個歡迎彈出窗口鼓勵首次訪問者使用獨特的優惠券代碼進行轉換,這也是迎接新訪問者的好方法。 此外,唯一代碼還有助於跟踪活動的效果。

在設計方面,這是一個非常簡單但好看的歡迎彈出窗口。 Candle Delirium 產品的精美圖片、品牌設計和簡短而甜蜜的信息。 電子商務商店歡迎彈出窗口的一個很好的例子。

想看酷炫的彈出式設計嗎?

電子郵件彈出示例
SMS 彈窗示例
旋轉贏彈窗示例

5. 帶有軟件演示的歡迎彈出窗口

zendesk 示例
  • 網站:Zendesk
  • 目標:增加演示視圖並產生潛在客戶
  • 激勵措施:通過示例了解 Zendesk 如何幫助提高客戶服務質量

由於各種原因,這個歡迎彈出窗口對我來說很突出。

首先,Zendesk 是一家軟件企業,因此該活動的目的是在演示會話中展示產品。 其次,彈出窗口充分利用了圖像,顯示了產品儀表板的屏幕截圖以及與之集成的一些流行應用程序。

當訪問者點擊 CTA 按鈕時,網站會將他們帶到演示註冊頁面。 在那裡,他們輸入他們的姓名和電子郵件以開始觀看演示。

總體而言,Zendesk 為我們提供了一個很棒的例子,說明網站彈出窗口如何幫助軟件企業產生潛在客戶並建立對其產品的認識。

6.“品牌介紹”歡迎彈窗

新聞示例
  • 網站:新聞保健食品
  • 目標:建立忠誠客戶名單
  • 獎勵:每週內容,包括健康生活方式提示、VIP 優惠和贈品

這裡有兩件事引起了我的注意:漂亮的產品圖片和帶有表情符號的隨意的寫作語氣。

PRESS Healthfoods 在產品圖片方面做得非常出色,因此在歡迎彈出窗口中加入一張是個好主意。 此外,帶有圖像的彈出窗口轉換了近 5% 的訪問者,而沒有圖像的彈出窗口僅轉換了 2.85%。

至於文案,“Let's make it official”感覺像是一個友好的對話開始,喚起了一種喜歡的感覺。 57% 的在線購物者更喜歡這種友好、隨意的溝通方式,所以這個歡迎彈出窗口給人留下了良好的第一印象。

7. 限時優惠的歡迎彈窗

限時示例
  • 網站: Pedego Bikes
  • 目標:增加特定產品的銷售額
  • 獎勵:限時免費升級產品

除了生成電子郵件註冊之外,歡迎彈出窗口也非常適合提高對促銷優惠和交易的認識。 這正是這個歡迎彈出窗口試圖完成的任務:通過誘人的限時優惠將流量吸引到產品頁面。

文案是這個彈出窗口的另一個好處。 甚至這裡的幾句話都充滿了引人注目的強力詞:“免費”、“有限時間”、“保存”和“結束”。 在標題中使用這些詞是一種行之有效的策略,經驗豐富的作家可以藉此吸引訪問者。

如何向任何網站添加歡迎彈出窗口

您可以輕鬆快速地創建歡迎彈出窗口並將其添加到您的網站。 為此,我們將使用我們自己的彈出工具Wisepops

如果您喜歡帶教程的視頻,請使用下面的視頻。 但是,如果您想要分步指南,它就在視頻下方。

所以-

按照以下步驟創建歡迎彈出窗口並將其添加到您的網站,而無需編碼。 首先,在 Wisepops 中獲得一個免費帳戶

製作歡迎彈窗的步驟:

  • 第 1 步:製作新的廣告系列
  • 第 2 步:選擇目標
  • 第 3 步:選擇廣告系列格式
  • 第 4 步:選擇彈出模板
  • 第 5 步:設計您的歡迎彈出窗口
  • 第 6 步:自定義感謝窗口
  • 第 7 步:定義如何顯示您的彈出窗口
  • 第 8 步:發布您的網站彈出窗口

第 1 步:製作新的廣告系列

讓我們為在線商店創建一個經典的歡迎彈出窗口 - 承諾獲得特別優惠和折扣以感謝您訂閱。 但是您可以在此過程中以任何您想要的方式自定義您的版本。

在 Wisepops 儀表板中,單擊Create Campaign並選擇Campaign Assistant

第一步

廣告活動助理是一項有用的功能,可引導您完成廣告活動的創建過程。 因此,它非常適合新用戶。

第 2 步:選擇目標

點擊Campaign Assistant後,您將看到三個可供選擇的目標:擴大受眾、推動銷售和收集反饋。
點擊擴大您的觀眾。

選擇目標

第 3 步:選擇廣告系列格式

由於我們正在創建一個歡迎彈出窗口來構建您的電子郵件列表,因此請選擇Newsletter

選路

第 4 步:選擇彈出模板

現在我們選擇歡迎彈出窗口的外觀。 我們的模板庫為您提供了一些預製彈出格式的不錯選擇。

模板

單擊模板以確認您的選擇並繼續下一步。

我們將使用這個歡迎彈出模板——它有一種熟悉的格式,可以將訪問者的注意力集中在消息上。

第 5 步:設計您的歡迎彈出窗口

我們需要讓這個歡迎彈出窗口真正屬於您——

這意味著自定義顏色、圖像和文本,使其看起來像您網站的自然部分。 借助拖放編輯器,這樣做非常容易——只需單擊一個元素並進行更改。

首先,讓我們編寫文本。

單擊文本元素以打開編輯設置。 在彈出窗口上方,您會看到它們(在圖像中突出顯示)。

編輯功能

下一個-

讓我們添加一個新圖像。

為此,請單擊模板中的視覺對象。 這將啟動屏幕左側的圖像菜單。 在那裡,單擊替換並選擇另一個圖像。

圖像插入

我通過點擊更改了顏色和圖像,然後——

這是我們的模板現在的樣子。 看起來像是來自蠟燭店的真正彈出窗口,同意嗎?

歡迎彈出版本

您可以完全設計相同(甚至更好!)的彈出窗口。

對於那些有興趣複製這種設計的人,我使用了:

  • Arial 字體
  • #803345 顏色
  • 這張由 Castorly Stock 拍攝的免費照片

第 6 步:自定義感謝窗口

當訪問者填寫字段並單擊Sign Me Up時,會出現一個感謝窗口。 大多數彈出模板都配備了這個窗口,因為它們用於確認訂閱、感謝訪問者和分享折扣代碼。

開始-

單擊謝謝選項卡。

謝謝你

在那裡,您會看到感謝窗口。

完全按照您對主要歡迎彈出窗口所做的自定義設計。 您可以輕鬆返回主菜單以獲取顏色代碼 - 只需單擊Main Pop-Up 。 另外,添加承諾的折扣代碼(我選擇了 TENOFF)。

這是我的版本的樣子。

謝謝你,歡迎彈出

現在,我們的歡迎彈出窗口的設計就完成了。

發布前的最後一件事是將彈出窗口設置為在您的網站上顯示給新訪問者。 這就是我們要做的。

第 7 步:定義如何顯示您的彈出窗口

轉到主菜單中的顯示規則

Wisepops 將在訪問者在您的網站上停留 8 秒後向他們顯示您的歡迎彈出窗口。 如果您想更早地顯示它,例如五秒鐘,只需在“僅在之後顯示”字段中添加您喜歡的數字。

定時

最後的設定——

我們只希望我們的新訪客看到這個歡迎彈出窗口。 為確保這一點,請在“受眾”選項卡中選擇“新訪問者”。

顯示規則

而已。

您剛剛為您的網站創建了一個漂亮的品牌歡迎彈出窗口,以產生潛在客戶並擴大您的受眾。 做得好!

第 8 步:發布您的歡迎彈出窗口!

我們已經完成了彈出窗口的設計,所以點擊完成編輯。 您將被重定向到廣告系列概覽窗口,您可以在其中單擊發布並確認。

發布

就是這樣,歡迎彈出窗口就在您的網站上! 恭喜!

一旦彈出窗口開始接收視圖並生成電子郵件,您就可以在 Wisepops 儀表板中檢查性能。

想要為您的網站平台提供彈出式教程嗎?

️ Wix 彈出窗口:如何添加
️ 如何在 Shopify 上添加彈出窗口
️ 如何製作 WooCommerce 彈出窗口

而且,如果您需要,還有一個專用的WordPress 彈出插件

歡迎彈出提示

使用這些提示使您的歡迎彈出窗口成為潛在客戶生成機器。

1. 提供福利

新鮮、有用的內容、折扣、優惠券、獨家優惠、免費送貨、搶先體驗新產品——企業將所有這些添加到歡迎彈出窗口中。 如果您正在經營在線業務,也請考慮使用激勵措施。

在選擇歡迎彈出獎勵時,來自發果的 Martin 決定贈送一件昂貴的物品。 由於這一決定,他在一個月內生成了 5,000 封電子郵件。

詳細信息:發果潛在客戶的故事

2.寫清楚的副本

所有很棒的歡迎彈出窗口都清楚地傳達了一個引人入勝的信息。

寫好文案:

  • 保持簡短和甜蜜。 人們需要盡快得到你的信息,所以盡量只寫兩句話(標題+支持信息)
  • 具有吸引力和創造性。 在您的歡迎彈出窗口中使用友好、隨意的語言——但如果您的品牌的聲音允許,請不要猶豫,保持詼諧或俏皮
  • 要求人們採取行動。 描述您需要訪問者做什麼並清楚該操作

相關內容:
電子商務文案:提示和示例

3.讓你的彈出窗口延遲出現

人們不喜歡在他們到達網站的那一刻出現的彈出窗口。

這就是為什麼考慮為您的歡迎彈出窗口設置至少五秒的延遲(就像我們在教程中所做的那樣)。

有經驗的營銷人員也會做一個簡單的把戲。 他們通過 Google Analytics 找出人們在其網站上花費的平均時間,並將顯示時間設置為該值的 20% 左右。 例如,如果平均時間為 60 秒,則彈出窗口可能會在 12 秒時出現(60 的 20% = 12)。

有關的:
彈出時間:何時顯示彈出窗口

4.添加倒計時

緊迫感是購買的強大動力:Wisepops 研究表明,添加倒數計時器可將轉化率提高 41%。

要在 Wisepops 中添加此元素:在主菜單中,轉到Blocks並選擇Countdown 。 計時器將自動添加到您的歡迎彈出窗口中。

倒數

5. 測試不同版本的歡迎彈窗

一些客戶希望找到最優惠的價格。

其他人傾向於衝動購買。

要了解訪問者的偏好(以及他們購買的原因),請創建不同版本的歡迎彈出廣告系列。

在 Wisepops 中,這意味著創建 A/B 測試:本質上,您可以通過單擊儀表板中的 AB 測試來複製歡迎彈出窗口。 這是以這種方式分成兩個版本的廣告系列的視圖。

ab測試

通過拆分,您可以輕鬆地以您想要的方式更改第二個廣告系列版本(折扣大小、倒計時/不倒計時等)並監控結果。

歡迎彈出窗口常見問題解答

儘管歡迎彈出窗口很受歡迎,但許多網站所有者擔心其有效性和對訪問者體驗的影響。 這就是為什麼在最後一節中,我們將回答人們最常見的問題。

歡迎彈出窗口的效果如何?

歡迎彈出窗口最多可以轉換 5% 的訪問者。

歡迎彈出窗口會損害我的客戶體驗嗎?

如果歡迎彈出窗口過於籠統且出現得太快,可能會很煩人。 如果您設計的品牌活動對訪問者俱有明確的價值,那麼您應該能夠轉化許多訪問者。

歡迎彈出窗口如何影響我商店的 SEO?

如果您使用頂級彈出軟件創建歡迎彈出窗口,那麼您的活動將 100% 符合所有 SEO 要求。

有關彈出窗口的更多提示和見解,請查看Wisepops 博客上的其他指南。