# How to Create Lytics Modals ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/use-cases-and-tutorials/how-to-create-lytics-modals | | **course_slug** | use-cases-and-tutorials | | **lesson_slug** | how-to-create-lytics-modals | | **markdown_file_url** | /academy/md/courses/use-cases-and-tutorials/how-to-create-lytics-modals.md | | **generated_at** | 2026-04-28T06:55:50.076Z | > Part of **[Use Cases and Tutorials](https://www.contentstack.com/academy/courses/use-cases-and-tutorials)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### Video details #### At a glance - **Title:** How To Create Lytics Modals - **Duration:** 7m 59s - **Media link:** https://cdn.jwplayer.com/previews/1ErLD9K4 - **Publish date (unix):** 1751775947 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113627 kbps - video/mp4 · 180p · 124p · 127669 kbps - video/mp4 · 270p · 186p · 132445 kbps - video/mp4 · 360p · 248p · 139841 kbps - video/mp4 · 406p · 280p · 143340 kbps - video/mp4 · 540p · 372p · 153007 kbps - video/mp4 · 720p · 496p · 167720 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/1ErLD9K4-120.vtt` #### Transcript Today we're going to overview Lytx experiences, how to create them, and any additional caveats that may be present that would be helpful when you're trying to activate on a campaign. So the first place we're going to start here is just clicking on the Add Experiences button. You're going to notice there are two different options, Import or Create a New Experience. If you select Import, it's going to direct you to a couple tools that we work with that will allow you to import experiences from those tools directly into the Lytx UI. The next option is going to be Creating Net New Experiences, which is where we're going to spend most of our time today. So as you can see here, we're going to select the Lytx Personalize Your Websites, and there are four different options. There's going to be Drive Traffic, Capture Leads, Present a Message, and Recommend Content. All four of these have some very similar steps in them, so there might be a little bit of repetitiveness, repetitive steps here, but I do want to make sure you understand that there is some uniqueness to these as well. So that's the goal of today is to cover that. So when you start with Drive Traffic, you're going to see that there's a place that you're going to need to enter the URL, and your experience will feature a call to action that links to this URL. So you want to make sure this is the one the modal should point to or direct users to. In this case, I'm just going to create Test URL, and then move to the next step. This is a forced step process, and what I mean by that is you have to fill this out before you can go to the next step. If it's not filled out, you will not be able to move on. The next place you're going to go is the Design section of the modal making experience. So in this case, you're going to design a widget and customize the look and feel of your widget to match your website. Depending on the layout or the position that you put the modal, you're going to notice that the left side of the screen does change a little bit, and that's just because some fields will be required in some layouts, and some fields will be required for others. You'll notice that if I use this, the first layout available, the center, middle center position, that if I try to go to the next step, it's actually going to stop me because I need to fill out the headline in the bottom first. So right here, I'm just going to fill out this is a test headline, and that this is the body of the modal itself. If you have a call-to-action list that you want to put here, Word, whatever your descriptor you want to send on, I'd start here. If you have an image URL that you want on modal 2.2 to bring in, this is going to be a great place for that URL. Additionally, on the right side of the screen, you're going to see that we do have some CSS options. There are different background, headline, and text colors that you can use. Additionally, if that's not something that you're interested in, you can create a class name assigned to this modal and put that in your own custom CSS file that then this modal can specifically reference. For more information, you're welcome to click this link here. It will direct you on the CSS styling of modals themselves. The next step is going to be to select an audience to target. I'm going to select anonymous profile. This is going to be where you select the audience that you want the modal to service to. The next step here is going to be the display options and where the modal displays and how often it displays. The first step here is you're going to put that your URL contains something. In this case, I'm just going to put test.com again. This is a list where you can either show on or hide on, contains, simple match, exact match, or regular expression regex. As soon as you're done, you're going to add the role. It will show up here if it's been added correctly. This is going to give you some advanced display options. There are a lot more options listed below this view, but they're just a couple that I wanted to do a high level overview on. Display trigger, as it sounds, show after one page views, including the current page view, show after seconds, show after 30% or 5% or 10% of your page scroll, and then show on exit intent, so the hover over the exit button. The display frequency is an important one to cover. It's one of the most commonly used within Linux. It's important to understand that show up up to times per user ever is focused on local storage of your web browser. So if the local storage is cleared, this will reset. The show up to number of times per session focuses on session storage. So whenever your session is cleared in session storage, this will show up. The most common way to clear session storage is opening up a new tab. These are important concepts to understand and carry through when you're standing up your modal. So the next, the final step in this process is the review step. So we're going to, you can preview, if you'd like, by clicking on the preview experience to start here just to make sure, and then you can save your experience by saving it here. Once your experience is saved, you can go to the next step and view the display, the overall settings of this experience before you save and finally exit. So this will just be a high-level view as you see the experience, the target, the display, and the design. If you need to edit any one of these sections, once you're done, you can select these or save and exit and then edit the experience. As soon as you create your modal, you're going to see here that we we have our drive traffic experience and it's set up and as soon as you stand up the modal and activate it, these metrics will kick in and you'll start to see the experience take into action. So let's go back. Now that you can see here that we've created experience, you can browse your experiences. We're going to go and create a new experience again and as you can see, the options were still the same, the UI is just a little different. So you have an option here of capturing leads as your next. So the UI is going to be a little bit different and that here you can list the fields that you want to show up on the modal for capturing the lead and you'll see here that the design, target, and display steps are going to be all the same. The only differentiation between capture leads and drive traffic is going to be this UI experience here. So we're not going to dive any further. Finally, we're going to step into the content recommendation modal or experience. So the present a message, the reason we're not going to cover that in this video is that it's going to be the exact same as capture leads and drive traffic. It's just going to be the design, the target, and the display step. So once you're going to recommend contact, as you can see, right, all these steps are the same. The only difference here is going to be this choose content. So you're going to create a content collection and recommend content based on either highest affinity, freshness, or last interaction and then you can only recommend content the user has not seen or shuffle content on each payload. Either one of these are an option. Once again, we're not going to go through the entire experience steps. We've already done that. Everything is the same for most of these different types of experiences. The only difference is going to be on this main page. So there you have it. We've walked through the Linux experiences at a high level. Now you should be able to create the different types of experiences and then also have a high-level understanding of any caveats that may happen when you're creating or wanting to create the experience, design the CSS, or update the experience itself. I hope this has helped and we will talk to you soon. #### Subtitles (WebVTT) ```webvtt WEBVTT 1 00:00:00.000 --> 00:00:05.640 Today we're going to overview Lytx experiences, how to create them, and any 2 00:00:05.640 --> 00:00:09.640 additional caveats that may be present that would be helpful when you're trying 3 00:00:09.640 --> 00:00:13.560 to activate on a campaign. So the first place we're going to start here is just 4 00:00:13.560 --> 00:00:16.680 clicking on the Add Experiences button. You're going to notice there are two 5 00:00:16.680 --> 00:00:21.600 different options, Import or Create a New Experience. If you select Import, it's 6 00:00:21.600 --> 00:00:25.440 going to direct you to a couple tools that we work with that will allow you to 7 00:00:25.440 --> 00:00:32.120 import experiences from those tools directly into the Lytx UI. The next 8 00:00:32.120 --> 00:00:35.760 option is going to be Creating Net New Experiences, which is where we're 9 00:00:35.760 --> 00:00:39.840 going to spend most of our time today. So as you can see here, we're going to 10 00:00:39.840 --> 00:00:44.120 select the Lytx Personalize Your Websites, and there are four different 11 00:00:44.120 --> 00:00:48.280 options. There's going to be Drive Traffic, Capture Leads, Present a Message, 12 00:00:48.280 --> 00:00:53.840 and Recommend Content. All four of these have some very similar steps in them, so 13 00:00:53.840 --> 00:00:57.280 there might be a little bit of repetitiveness, repetitive steps here, but 14 00:00:57.280 --> 00:01:00.800 I do want to make sure you understand that there is some uniqueness to these 15 00:01:00.800 --> 00:01:05.280 as well. So that's the goal of today is to cover that. So when you start with 16 00:01:05.280 --> 00:01:08.760 Drive Traffic, you're going to see that there's a place that you're going to 17 00:01:08.760 --> 00:01:12.680 need to enter the URL, and your experience will feature a call to action 18 00:01:12.680 --> 00:01:17.080 that links to this URL. So you want to make sure this is the one the modal 19 00:01:17.080 --> 00:01:22.320 should point to or direct users to. In this case, I'm just going to create Test 20 00:01:22.320 --> 00:01:28.560 URL, and then move to the next step. This is a forced step process, and what I mean 21 00:01:28.560 --> 00:01:33.040 by that is you have to fill this out before you can go to the next step. If 22 00:01:33.040 --> 00:01:36.920 it's not filled out, you will not be able to move on. The next place you're going 23 00:01:36.920 --> 00:01:42.880 to go is the Design section of the modal making experience. So in this case, you're 24 00:01:42.880 --> 00:01:46.000 going to design a widget and customize the look and feel of your widget to 25 00:01:46.000 --> 00:01:51.480 match your website. Depending on the layout or the position that you put the 26 00:01:51.480 --> 00:01:55.160 modal, you're going to notice that the left side of the screen does change a 27 00:01:55.160 --> 00:01:59.560 little bit, and that's just because some fields will be required in some layouts, 28 00:01:59.560 --> 00:02:04.440 and some fields will be required for others. You'll notice that if I use this, the 29 00:02:04.440 --> 00:02:09.440 first layout available, the center, middle center position, that if I try to go to 30 00:02:09.440 --> 00:02:12.200 the next step, it's actually going to stop me because I need to fill out the 31 00:02:12.200 --> 00:02:17.000 headline in the bottom first. So right here, I'm just going to fill out this is 32 00:02:17.000 --> 00:02:22.480 a test headline, and that this is the body of the modal itself. If you have a 33 00:02:22.480 --> 00:02:28.200 call-to-action list that you want to put here, Word, whatever your descriptor you 34 00:02:28.200 --> 00:02:32.680 want to send on, I'd start here. If you have an image URL that you want on 35 00:02:32.680 --> 00:02:38.440 modal 2.2 to bring in, this is going to be a great place for that URL. 36 00:02:38.440 --> 00:02:41.920 Additionally, on the right side of the screen, you're going to see that we do have 37 00:02:41.920 --> 00:02:46.120 some CSS options. There are different background, headline, and text colors that 38 00:02:46.120 --> 00:02:50.280 you can use. Additionally, if that's not something that you're interested in, you 39 00:02:50.280 --> 00:02:54.960 can create a class name assigned to this modal and put that in your own custom 40 00:02:54.960 --> 00:02:59.560 CSS file that then this modal can specifically reference. For more 41 00:02:59.560 --> 00:03:03.560 information, you're welcome to click this link here. It will direct you on the CSS 42 00:03:03.560 --> 00:03:07.720 styling of modals themselves. The next step is going to be to select an 43 00:03:07.720 --> 00:03:12.920 audience to target. I'm going to select anonymous profile. This is going to be 44 00:03:12.960 --> 00:03:17.920 where you select the audience that you want the modal to service to. The next step 45 00:03:17.920 --> 00:03:23.680 here is going to be the display options and where the modal displays and how 46 00:03:23.680 --> 00:03:28.480 often it displays. The first step here is you're going to put that your URL 47 00:03:28.480 --> 00:03:32.200 contains something. In this case, I'm just going to put test.com again. 48 00:03:32.200 --> 00:03:38.400 This is a list where you can either show on or hide on, contains, simple match, 49 00:03:38.400 --> 00:03:43.680 exact match, or regular expression regex. As soon as you're done, you're going to 50 00:03:43.680 --> 00:03:48.480 add the role. It will show up here if it's been added correctly. This is going 51 00:03:48.480 --> 00:03:52.760 to give you some advanced display options. There are a lot more options 52 00:03:52.760 --> 00:03:57.080 listed below this view, but they're just a couple that I wanted to do a high 53 00:03:57.080 --> 00:04:02.600 level overview on. Display trigger, as it sounds, show after one page views, including 54 00:04:02.600 --> 00:04:09.280 the current page view, show after seconds, show after 30% or 5% or 10% of 55 00:04:09.280 --> 00:04:13.600 your page scroll, and then show on exit intent, so the hover over the exit button. 56 00:04:13.600 --> 00:04:17.920 The display frequency is an important one to cover. It's one of the most 57 00:04:17.920 --> 00:04:21.640 commonly used within Linux. It's important to understand that show up up 58 00:04:21.640 --> 00:04:27.740 to times per user ever is focused on local storage of your web browser. So if 59 00:04:27.740 --> 00:04:32.400 the local storage is cleared, this will reset. The show up to number of times per 60 00:04:32.400 --> 00:04:36.920 session focuses on session storage. So whenever your session is cleared in 61 00:04:36.920 --> 00:04:41.360 session storage, this will show up. The most common way to clear session storage 62 00:04:41.360 --> 00:04:45.680 is opening up a new tab. These are important concepts to understand and 63 00:04:45.680 --> 00:04:51.800 carry through when you're standing up your modal. So the next, the final step in 64 00:04:51.800 --> 00:04:59.040 this process is the review step. So we're going to, you can preview, if you'd like, 65 00:04:59.040 --> 00:05:03.800 by clicking on the preview experience to start here just to make sure, and then 66 00:05:03.800 --> 00:05:10.840 you can save your experience by saving it here. Once your experience is saved, you 67 00:05:10.840 --> 00:05:17.400 can go to the next step and view the display, the overall settings of this 68 00:05:17.400 --> 00:05:22.640 experience before you save and finally exit. So this will just be a high-level 69 00:05:22.640 --> 00:05:26.680 view as you see the experience, the target, the display, and the design. If you 70 00:05:26.680 --> 00:05:30.800 need to edit any one of these sections, once you're done, you can select these or 71 00:05:30.800 --> 00:05:36.320 save and exit and then edit the experience. As soon as you create your 72 00:05:36.320 --> 00:05:41.960 modal, you're going to see here that we we have our drive traffic experience and 73 00:05:41.960 --> 00:05:47.880 it's set up and as soon as you stand up the modal and activate it, these metrics 74 00:05:47.880 --> 00:05:55.280 will kick in and you'll start to see the experience take into action. So let's go 75 00:05:55.280 --> 00:05:58.560 back. Now that you can see here that we've created experience, you can browse 76 00:05:58.560 --> 00:06:03.920 your experiences. We're going to go and create a new experience again and as you 77 00:06:03.920 --> 00:06:08.760 can see, the options were still the same, the UI is just a little different. So you 78 00:06:08.760 --> 00:06:13.360 have an option here of capturing leads as your next. So the UI is going to be a 79 00:06:13.360 --> 00:06:17.400 little bit different and that here you can list the fields that you want to 80 00:06:17.400 --> 00:06:22.080 show up on the modal for capturing the lead and you'll see here that the design, 81 00:06:22.200 --> 00:06:26.600 target, and display steps are going to be all the same. The only differentiation 82 00:06:26.600 --> 00:06:31.560 between capture leads and drive traffic is going to be this UI experience here. 83 00:06:31.560 --> 00:06:38.960 So we're not going to dive any further. Finally, we're going to step into the 84 00:06:38.960 --> 00:06:46.320 content recommendation modal or experience. So the present a message, the 85 00:06:46.320 --> 00:06:50.200 reason we're not going to cover that in this video is that it's going to be the 86 00:06:50.200 --> 00:06:53.640 exact same as capture leads and drive traffic. It's just going to be the design, 87 00:06:53.640 --> 00:06:57.880 the target, and the display step. So once you're going to recommend contact, as you 88 00:06:57.880 --> 00:07:01.000 can see, right, all these steps are the same. The only difference here is going 89 00:07:01.000 --> 00:07:06.040 to be this choose content. So you're going to create a content collection and 90 00:07:06.040 --> 00:07:13.640 recommend content based on either highest affinity, freshness, or last 91 00:07:13.640 --> 00:07:17.680 interaction and then you can only recommend content the user has not seen 92 00:07:17.680 --> 00:07:22.840 or shuffle content on each payload. Either one of these are an option. Once 93 00:07:22.840 --> 00:07:26.440 again, we're not going to go through the entire experience steps. We've already 94 00:07:26.440 --> 00:07:31.360 done that. Everything is the same for most of these different types of 95 00:07:31.360 --> 00:07:37.080 experiences. The only difference is going to be on this main page. So there you 96 00:07:37.080 --> 00:07:41.640 have it. We've walked through the Linux experiences at a high level. Now you 97 00:07:41.640 --> 00:07:46.000 should be able to create the different types of experiences and then also have 98 00:07:46.000 --> 00:07:49.600 a high-level understanding of any caveats that may happen when you're 99 00:07:49.600 --> 00:07:55.080 creating or wanting to create the experience, design the CSS, or update the 100 00:07:55.080 --> 00:08:00.560 experience itself. I hope this has helped and we will talk to you soon. ``` ```transcript [00:00] Today we're going to overview Lytx experiences, how to create them, and any [00:05] additional caveats that may be present that would be helpful when you're trying [00:09] to activate on a campaign. So the first place we're going to start here is just [00:13] clicking on the Add Experiences button. You're going to notice there are two [00:16] different options, Import or Create a New Experience. If you select Import, it's [00:21] going to direct you to a couple tools that we work with that will allow you to [00:25] import experiences from those tools directly into the Lytx UI. The next [00:32] option is going to be Creating Net New Experiences, which is where we're [00:35] going to spend most of our time today. So as you can see here, we're going to [00:39] select the Lytx Personalize Your Websites, and there are four different [00:44] options. There's going to be Drive Traffic, Capture Leads, Present a Message, [00:48] and Recommend Content. All four of these have some very similar steps in them, so [00:53] there might be a little bit of repetitiveness, repetitive steps here, but [00:57] I do want to make sure you understand that there is some uniqueness to these [01:00] as well. So that's the goal of today is to cover that. So when you start with [01:05] Drive Traffic, you're going to see that there's a place that you're going to [01:08] need to enter the URL, and your experience will feature a call to action [01:12] that links to this URL. So you want to make sure this is the one the modal [01:17] should point to or direct users to. In this case, I'm just going to create Test [01:22] URL, and then move to the next step. This is a forced step process, and what I mean [01:28] by that is you have to fill this out before you can go to the next step. If [01:33] it's not filled out, you will not be able to move on. The next place you're going [01:36] to go is the Design section of the modal making experience. So in this case, you're [01:42] going to design a widget and customize the look and feel of your widget to [01:46] match your website. Depending on the layout or the position that you put the [01:51] modal, you're going to notice that the left side of the screen does change a [01:55] little bit, and that's just because some fields will be required in some layouts, [01:59] and some fields will be required for others. You'll notice that if I use this, the [02:04] first layout available, the center, middle center position, that if I try to go to [02:09] the next step, it's actually going to stop me because I need to fill out the [02:12] headline in the bottom first. So right here, I'm just going to fill out this is [02:17] a test headline, and that this is the body of the modal itself. If you have a [02:22] call-to-action list that you want to put here, Word, whatever your descriptor you [02:28] want to send on, I'd start here. If you have an image URL that you want on [02:32] modal 2.2 to bring in, this is going to be a great place for that URL. [02:38] Additionally, on the right side of the screen, you're going to see that we do have [02:41] some CSS options. There are different background, headline, and text colors that [02:46] you can use. Additionally, if that's not something that you're interested in, you [02:50] can create a class name assigned to this modal and put that in your own custom [02:54] CSS file that then this modal can specifically reference. For more [02:59] information, you're welcome to click this link here. It will direct you on the CSS [03:03] styling of modals themselves. The next step is going to be to select an [03:07] audience to target. I'm going to select anonymous profile. This is going to be [03:12] where you select the audience that you want the modal to service to. The next step [03:17] here is going to be the display options and where the modal displays and how [03:23] often it displays. The first step here is you're going to put that your URL [03:28] contains something. In this case, I'm just going to put test.com again. [03:32] This is a list where you can either show on or hide on, contains, simple match, [03:38] exact match, or regular expression regex. As soon as you're done, you're going to [03:43] add the role. It will show up here if it's been added correctly. This is going [03:48] to give you some advanced display options. There are a lot more options [03:52] listed below this view, but they're just a couple that I wanted to do a high [03:57] level overview on. Display trigger, as it sounds, show after one page views, including [04:02] the current page view, show after seconds, show after 30% or 5% or 10% of [04:09] your page scroll, and then show on exit intent, so the hover over the exit button. [04:13] The display frequency is an important one to cover. It's one of the most [04:17] commonly used within Linux. It's important to understand that show up up [04:21] to times per user ever is focused on local storage of your web browser. So if [04:27] the local storage is cleared, this will reset. The show up to number of times per [04:32] session focuses on session storage. So whenever your session is cleared in ``` #### Lesson text Learn how to create modals in Lytics to personalize web experiences for your customers. **Note:** On January 10, 2023, we upgraded our UI with a new, refreshed interface. All of the underlying functionality is the same, but you will notice that things look a little different from this Academy guide. The most notable change is that the navigation menu has moved from the top of the app to the left side. We appreciate your patience as we work on updating our Academy. In the "How to Create Lytics Modals" video (8 mins), we'll give a high level overview of how to create Lytics Experiences (often referred to as "modals"). Lytics provides 4 out-of-the-box modals to quickly begin personalizing the web experience for your customers. * Drive Traffic * Capture Leads * Present a Message * Recommend Content To continue learning about Lytics Experiences, we recommend you check out the following. ### Academy Courses * Intro to Experiences * Create Personalized Experiences ### Documentation * [Experience Editor](https://learn.lytics.com/documentation/product/features/experiences/experience-editor/experience-editor) * [Experiences Overview](https://learn.lytics.com/documentation/product/features/experiences/overview) #### Key takeaways - Connect **How to Create Lytics Modals** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Supplement for indexing ### Content summary How to Create Lytics Modals. Learn how to create modals in Lytics to personalize web experiences for your customers. Note: On January 10, 2023, we upgraded our UI with a new, refreshed interface. All of the underlying functionality is the same, but you will notice that things look a little different from this Academy guide. The most notable change is that the navigation menu has moved from the top of the app to the left side. We appreciate your patience as we work on updating our Academy. In the "How to Create Lytics Modals" video (8 mins), we'll give a high level overview of how to create Lytics Experiences (often referred to as "modals"). Lytics provides 4 out-of-the-box modals to quickly begin personalizing the web e ### Retrieval tags - How - Create - Lytics - Modals - use-cases-and-tutorials - lesson 11 - How to Create Lytics Modals - use-cases-and-tutorials lesson ### Indexing notes Index this lesson as a primary chunk tagged with lesson_id "11" and topics: [How, Create, Lytics, Modals]. Parent course slug: use-cases-and-tutorials. Use asset_references URLs as thumbnail hints in search results when present. Never surface LMS quiz content or assessment answers from this file. ### Asset references | Label | URL | | --- | --- | | Video thumbnail: How to Create Lytics Modals | `https://cdn.jwplayer.com/v2/media/1ErLD9K4/poster.jpg?width=720` | ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` | | Experience Editor | `https://learn.lytics.com/documentation/product/features/experiences/experience-editor/experience-editor` | | Experiences Overview | `https://learn.lytics.com/documentation/product/features/experiences/overview` |