這就是您最喜歡的企業使用網站彈出窗口發展的方式(您也可以!)

已發表: 2020-04-02

有兩種人。

那些喜歡網站彈出窗口的人,以及那些討厭它們的人。

第一組知道網站彈出窗口的效果是多麼可笑。 第二組覺得他們可笑地煩人。

但是一個好的網站彈出窗口和一個壞的彈出窗口之間的真正區別是什麼?


通過查看數百個,我們得出了以下結論。 這一切歸結為三件事:

  • 這些彈出窗口的外觀

  • 他們提供什麼價值

  • 他們什麼時候出現

我的意思是,是的,一些彈出窗口很煩人,令人討厭,醜陋的體驗中斷者。

但那是因為它們的設置方式錯誤。

例如,看看耐克網站上這個驚人的彈出窗口:

耐克網站上的網站彈出窗口宣布全場促銷

有人會說它令人討厭或煩人嗎?

我也是這麼想的。

耐克彈出窗口看起來很優雅並且提供了價值(在結賬時自動應用折扣,是的!)。 而且它肯定也不會中斷體驗。 如果有的話 - 它是它的一個組成部分。

有數以千計的大型知名公司成功地使用網站彈出窗口來收集電子郵件、宣布銷售和顯示號召性用語。 以《紐約時報》、阿迪達斯、《衛報》、《世紀 21》或 Slack 為例——這個名單可以繼續下去!

那麼,為什麼不向最好的人學習並應用他們的方法來發展您的業務呢?

您可能認為您需要開發人員或這些大公司的預算來為您的網站添加具有專業外觀的彈出窗口。 嗯,這不是真的。

在這篇博文中,我們將向您展示 15 個網站彈出窗口示例,這些示例被各種細分市場中的一些最知名企業使用。 我們還將向您解釋為什麼每個彈出窗口都如此有效。

最好的部分? 我們將準確地向您展示如何使用 Getsitecontrol 在幾分鐘內在您的網站上重新創建它們。

為了幫助您導航,我們將列表分為 3 類。 您即將看到有助於以下內容的網站彈出窗口:

  • 獲取電子郵件訂閱者

  • 顯示號召性用語

  • 宣布任何更新

隨意跳到您最感興趣的類別。

幫助品牌建立電子郵件列表的網站彈出窗口

現在每個人都為增加他們的電子郵件列表而瘋狂。 你也應該如此!

萬一您錯過了,電子郵件每花費 1 美元就有高達 44 美元的投資回報率。

讓人們在您的電子郵件列表中意味著您擁有在他們的收件箱中直接與他們會面、發展關係並將他們轉變為常客的獨家許可。

等等,但是增加電子郵件列表的最佳方法是什麼? 我打賭你已經知道答案了。

這是網站彈出窗口。

讓我們看看您肯定聽說過(甚至可能購買過)的品牌如何使用彈出窗口來收集電子郵件地址。

1. The New York Times store – 第一次下單立減 10%

《紐約時報》是最早發展成為付費訂閱在線媒體的媒體之一。

今天,這是訪問量最大的報紙網站。 他們將網站彈出窗口用於各種目的。

例如,看看這個極簡的電子郵件訂閱表格,它會在您登陸《紐約時報》在線商店時立即出現。

紐約時報商店使用網站彈出窗口收集電子郵件

以下是使該網站彈出窗口很棒的原因:

  • 有凝聚力的設計
    彈出窗口與紐約時報商店的其餘部分具有相同的顏色主題和相同的字體。 它似乎是網站不可或缺的、可信的部分。

  • 鉛磁鐵
    您不僅可以訂閱新優惠,如果您加入該列表,您的第一筆訂單還可以獲得 10% 的折扣。

  • 瞬間出現
    網站彈出窗口應該立即出現還是在訪問者在頁面上停留一段時間後出現總是不清楚。 在這種情況下,立即顯示表單肯定比在潛在客戶購買之後更好,不是嗎?

想要向您的網站添加類似的訂閱彈出窗口嗎?

我們遵循《紐約時報》的創新精神來構建類似的訂閱表格。 單擊下面的網站彈出窗口以查看它的運行情況。 然後按照頁面右側顯示的簡單說明進行操作。

由 Getsitecontrol 提供支持的簡約電子郵件列表構建彈出窗口 查看實時預覽 →

實時預覽模板將直接添加到您的 Getsitecontrol 儀表板。 從那裡,您將能夠調整折扣百分比、標題和顏色主題等細節,使其與您的網站完美匹配。

然後,您就可以使用定位設置以指定您希望彈出窗口出現的頁面。

2. Century 21 – 解鎖 25 美元折扣或支付全價

Century 21,這家折扣時尚零售巨頭在幾年前上線,也涉足電子郵件列表建設遊戲。 查看在您到達他們的網站後幾秒鐘顯示的彈出窗口。

Century 21 在其彈出窗口中使用了一個否定的退出按鈕

以下是此網站彈出窗口的優點:

  • 電子郵件格式縮微
    Century 21 選擇指定電子郵件地址的外觀以確保客戶正確使用。 知道他們的受眾非常廣泛,包括不一定精通技術的人,這是一個很好的決定。

  • 否定的退出按鈕
    當然,如果您不想註冊,則不必註冊。 但這意味著您願意支付全價,對嗎? 選擇退出按鈕是一個小細節,讓您在拒絕報價之前三思而後行。

  • 智能選擇顏色
    請注意,此彈出窗口的顏色不僅與網站的主題相關,而且“繼續”按鈕也用紅色強調。 同時,選擇退出按鈕與背景融為一體。

想要一個帶有選擇退出按鈕的彈出窗口嗎?

如果您喜歡這個網站彈出窗口,重新創建它就像 1-2-3 一樣簡單。 只需單擊下面的模板並按照說明進行操作。

Getsitecontrol 帶有按鈕的電子郵件訂閱彈出窗口 查看實時預覽 →

進入儀表板後,通過內容如果需要,可以設置來調整副本和顏色主題。 以 Century 21 為例,您可能還想將您的徽標添加到頂部。

3. 瑪麗克萊爾——FOMO 效應在起作用

如果您認為否定選擇退出按鈕可能僅適用於在線商店,請再想一想。

當您通過電子郵件提供高質量的內容時,您不妨提醒人們不訂閱的後果。 看看瑪麗克萊爾雜誌如何在他們的選擇退出按鈕上使用 FOMO 效果。

瑪麗克萊爾提供鉛磁鐵以換取訂閱

這是我們喜歡這個網站彈出窗口的地方:

  • 否定的退出按鈕
    除了 FOMO 效應,請注意 Marie Claire 如何將選擇退出按鈕變成自愛聲明。

  • 電子郵件註冊 CTA 副本
    您可以在註冊按鈕上放置許多激勵性的號召性用語,而不僅僅是“訂閱”。 “給我看看裡面有什麼!” 是其中之一。

  • 圖像的選擇
    在這種情況下,它不僅僅是任何圖像。 這是西爾莎·羅南(Saoirse Ronan)的照片,大多數讀者肯定會認出她是一位才華橫溢的女演員。

為什麼圖像在這裡如此重要?

擁有與訂閱者期望相關的視覺效果對於提高電子郵件註冊率至關重要。 因為他們不只是訂閱一些髮型趨勢。 他們訂閱了在紅地毯上看起來像好萊塢明星的秘訣。

認為您可能想要一個像這樣的網站彈出窗口嗎?

Getsitecontrol 彈出式構建器有一個模板,可以幫助您輕鬆地重新創建上面的示例。 看看下面。

一個網站彈出模板,其中一張圖片佔據了一半的空間 查看實時預覽 →

將其添加到儀表板後,您將能夠輕鬆地將圖像替換為您的視覺對像或從圖庫中選擇替代圖片。

4. Adidas – 訂閱電子郵件可享受 15% 的折扣

阿迪達斯為新訂閱者提供 15% 的折扣,並在您在他們的網站上停留一段時間後顯示一個彈出窗口。

阿迪達斯的網站彈出窗口帶有同意複選框

現在,這是阿迪達斯網站彈出窗口的特別之處:

  • 底部的縮微文案為了減輕您對被無關電子郵件發送垃圾郵件的恐懼,阿迪達斯準確指定了您訂閱的內容。

  • 年齡確認複選框根據兒童在線隱私保護法 (COPPA),每個訂閱者都必須確認他們已年滿 13 歲 此復選框還可用於收集明確同意以接收營銷電子郵件。

  • 基於性別的細分根據您的回复,阿迪達斯稍後將應用細分規則向您發送最相關的內容。 但是,考慮到阿迪達斯生產的性別中立商品的數量,將此字段設置為可選也是明智之舉。

  • 訂閱確認註冊後,您會看到一條所謂的“提交成功消息”,告訴您會發生什麼。

阿迪達斯網站上的表單提交成功信息

這裡的另一種選擇是顯示折扣代碼,供人們在結賬時復制和粘貼。 這樣,他們無需離開商店打開電子郵件就可以繼續購物。

5. Ahrefs – 不要錯過下一篇文章

讓我們繼續進入 IT 世界。

Ahrefs,一位著名的 SEO 軟件開發商,使用這個可愛的幻燈片建議您在到達博客文章末尾時訂閱他們的時事通訊。

Ahrefs 使用一個很小的側滑來顯示電子郵件註冊表單

這是它的偉大之處:

  • 不同的格式
    與模態彈出窗口不同,幻燈片不那麼突兀,但足夠吸引人注意。 對於您希望盡可能流暢地保持閱讀體驗的內容項目,它們可能是一個完美的選擇。

  • 頁面行為觸發器
    該表單僅在您到達博客文章末尾時出現。 這是建議訂閱的最佳時機,因為參與度很高。

  • FOMO 原則
    如果您看完了 Ahref 的一篇長篇閱讀文章,那麼您很可能會喜歡它。 而且你不想錯過另一部像這樣的偉大作品。

想在您的網站上添加類似的幻燈片嗎?

重新創建此訂閱表單很容易。 我們已經構建了一個類似的右側滑入式,因此您可以快速將其安裝到您的網站上。

Getsitecontrol 的電子郵件訂閱幻燈片模板 查看實時預覽 →

單擊小部件以查看其運行情況並按照說明進行操作。

準備好後,使用定位設置以選擇網站上您希望幻燈片出現的特定頁面以及它應該出現的時間。

6. Product Hunt – 訂閱每日時事通訊

Product Hunt 是最大的在線社區之一,每天都會推出令人驚嘆的科技產品。 那些沒有時間每天去查看網站的人可以通過電子郵件訂閱獲得最重要的更新摘要。

為了增加訂閱數量,Product Hunt 在頁面底部有一個浮動的電子郵件註冊欄。

Product Hunt 使用浮動電子郵件選擇欄來收集電子郵件

以下是此訂閱表格的優點:

  • 盡量減少分心
    浮動欄是所有網站彈出窗口中最不引人注目的。 當您滾動內容時,它們會停留在網頁的頂部或底部,並耐心等待您準備好訂閱。

  • 通訊頻率
    該副本準確地告訴您從 Product Hunt 收到電子郵件的頻率。

  • 正宗的設計
    表情符號和按鈕顏色是 Product Hunt 的標誌性元素。 在表單中使用它們是一個很好的決定。

想要自己的浮動電子郵件註冊欄嗎?

您可以向您的網站添加類似的小部件並在整個站點或特定頁面上顯示它。 使用下面的現成模板開始。

Getsitecontrol 帶有電子郵件字段的簡單浮動欄 查看實時預覽 →

該模板的副本和設計非常通用,因此請隨時在您的網站上直接使用它。

網站彈出窗口顯示您的號召性用語

是時候進入下一個類別了!

公司使用網站彈出窗口的第二個重要原因是鼓勵訪問者獲得折扣、查看新博客文章、參與贈品——換句話說,採取行動

讓我們看看現實生活中的企業是如何做到這一點的。

7. Century 21 – 出發前享受折扣

如果您開始瀏覽 Century 21 在線商店,您需要有極大的意志力,並抵制在每個角落獲取特價商品的衝動。

首先,他們要求您訂閱以換取 25 美元的優惠券。 然後,如果您想在沒有購買的情況下離開,您會看到以下網站彈出窗口:

Century 21使用退出意圖技術提供折扣

如果您點擊“是的,請!” 按鈕,優惠券代碼顯示在彈出窗口的右側。 您可以復制代碼並在結賬時粘貼。 簡單的。 有效的。

這就是退出意圖方法如此有效的原因:

  • 注意力保證
    當您導航退出時,絕對不會錯過出現在您眼前的折扣優惠。

  • 最後一招
    退出意圖彈出窗口實際上為您提供了轉換即將離開的人的獨特機會。 當然,並不是每個放棄的訪客都會回應。 但他們中的一些人會——而且每一次努力都很重要,對吧?

想要在您的網站上放置一個退出意圖彈出窗口嗎?

查看下面的模板。 它已經設置為在您的訪問者開始導航以退出頁面時顯示。

Getsitecontrol 提供折扣優惠的退出意圖彈出模板 查看實時預覽 →

只需單擊幾下即可將其放置到您的網站,然後轉到定位設置來指定它應該彈出的頁面。 例如,您可能希望將其放置在產品頁面、類別頁面甚至結賬處,以防止放棄購物車。

8. Skillshare – 推薦計劃促銷

Skillshare 是一個在線學習平台,它正在運行一個推薦計劃,讓您可以通過邀請朋友來獲得幾個月的免費課程。 請注意他們放置在每個頁面頂部的浮動欄。

Skillshare 使用頂部浮動欄來推廣他們的推薦計劃

Skillshare 在這裡做了什麼:

  • 對比色
    Skillshare 選擇白色是因為考慮到深藍色網站顏色主題,它會吸引註意力。

  • 足夠的細節
    儘管空間不足,但該副本為您提供了足夠的信息來決定您是否感興趣。

  • 清除 CTA 按鈕
    “邀請朋友”按鈕設定了明確的期望。 它會將您帶到專用頁面,您可以在其中了解詳細信息並獲取推薦鏈接。

9. 紐約時報——立即閱讀重要更新

如果您的項目專注於內容,您可以使用彈出窗口來宣傳博客上的最新文章、選定主題的重要更新或僅相關材料。

例如,這就是《紐約時報》如何促使讀者關注 COVID-19 爆發的實時更新。

《紐約時報》安裝了一個浮動欄,以吸引對重要新聞的關注

網頁底部的號召性用語欄被各種媒體用於各種目的。 只需查看我們的下一個示例,該示例具有類似外觀的彈出窗口。

10. 衛報——今天就支持衛報

與《紐約時報》不同的是,《衛報》選擇將所有材料開放獲取,而讀者可以通過捐款的形式參與為報紙提供資金。 查看他們如何使用頁面底部的彈出窗口傳達此消息。

衛報使用黃色粘性條鼓勵遊客捐款

想在您的網站上使用類似的彈出窗口嗎?

當你想把重點放在信息上時,顯然,這些粘滯條是完美的注意力吸引器。 如果您想向您的網站添加一個模板,請查看下面的模板。

Getsitecontrol 的底部粘性欄模板 查看實時預覽 →

將其添加到 Getsitecontrol 儀表板後,轉到內容選項卡並打開按鈕設置以放置指向所需頁面的鏈接。

網站彈出窗口發布全站公告

最後一類網站彈出窗口旨在通知訪問者而不是鼓勵他們採取行動。

如果您想讓您的受眾了解最新的新聞和當前條款,網站彈出窗口是完美的選擇。

您可以使用它們來宣傳業務運營變化、當前優惠或新政策——例如 cookie 同意政策。

讓我們來看看 Reebok、Tiffany、Nespresso、Intercom 和 Slack 如何處理這種類型的通信。

11. Reebok – 全場銷售公告

為確保登陸其網站的每個人都了解全場促銷,銳步在網頁頂部放置了一個浮動公告欄。

Reebok 宣佈在頁面頂部使用黑色粘性條進行全場促銷

此公告不需要網站訪問者的任何操作。 您可以將其視為一個不錯的驚喜和繼續瀏覽商店的動力。

12. Tiffany & Co. – 免費服務提醒

以下是 Tiffany & Co. 通知在線商店訪問者所有訂單均可免費送貨和退貨的方式。 他們在網頁頂部使用標誌性的蒂芙尼藍色浮動條。

Tiffany & Co 為粘性公告欄選擇了他們的標誌性顏色

如果您有網站主題的顏色代碼,則可以在彈出窗口中使用它們外觀/CSS 設置來創建一個完美匹配的公告欄,就像蒂芙尼的一樣。

13. Nespresso – 可能的交貨延遲公告

最後一個浮動條示例屬於 Nespresso 網站。 他們通過通知在線客戶延遲交貨來提醒他們。

Nespresso 使用粘性標准通知客戶交貨延遲

同樣,您可能已經註意到浮動條的顏色不是隨機選擇的——它與下面的“搜索”按鈕完美匹配。

想要重新創建這些網站彈出窗口嗎?

為了通過簡短但重要的信息吸引觀眾,浮動條非常棒。 要將一個添加到您的網站,只需單擊下面的模板,然後編輯副本。

Getsitecontrol 提供簡約的置頂公告欄模板 查看實時預覽 →

隨意將顏色更改為在您的網站上看起來更好的顏色。 顏色主題可在外貌Getsitecontrol 儀表板的選項卡。

14. Slack – cookie 同意橫幅

我們列表中的最後兩個示例是 cookie 橫幅。

您可能知道,從 2018 年開始,每個接收歐盟訪問者的網站都需要獲得他們的知情同意,才能使用跟踪用戶數據的 cookie。

這就是 Slack 網站上的 cookie 消息的樣子。

Slack 使用網站彈出窗口顯示 cookie 同意消息

Slack 選擇使用右側滑入式鏈接到 cookie 同意政策並在單擊時關閉。

如果您想放置一個類似的,請使用下面的模板。

Getsitecontrol 允許您安裝和自定義 cookie 橫幅 查看實時預覽 →

您可以按原樣將此彈出窗口添加到您的網站,或者您可以將指向您的 Cookie 政策頁面的鏈接插入小部件副本,就像 Slack 所做的那樣。

15. 對講機 – cookie 同意貼

Intercom 是一家流行的消息平台開發商,它選擇在網頁頂部使用不那麼顯眼的粘性欄來通知訪問者有關 cookie 政策的信息。

對講機選擇在浮動欄上顯示 cookie 通知

如果您更喜歡此選項,請繼續並單擊此處檢查 cookie 同意欄的 Getsitecontrol 模板。

準備好使用網站彈出窗口來發展您的業務了嗎?

如果您一直好奇網站彈出窗口是否有助於發展您的業務——今天就是找出答案的一天。

不知道從什麼開始?

以下是我們最受歡迎的 3 個網站彈出窗口:

  • 電子郵件訂閱表格,

  • cookie 同意橫幅,

  • 特價促銷。

使用 Getsitecontrol 選擇與您的業務最相關的一個(或一次將所有這些添加到您的網站)並免費試用。

您正在閱讀 Getsitecontrol 博客,其中營銷專家分享經過驗證的策略來發展您的在線業務。 本文是客戶參與部分的一部分。

訂閱我們的時事通訊 → Icons8 的主要插圖