--- title: "Design a Web Template" slug: "design-a-web-template" tags: ["personalize web templates", "web template"] updated: 2026-06-30T09:16:13Z published: 2026-06-30T09:16:13Z canonical: "academy.insiderone.com/design-a-web-template" --- > ## Documentation Index > Fetch the complete documentation index at: https://academy.insiderone.com/llms.txt > Use this file to discover all available pages before exploring further. # Design a Web Template Insider One's Web Templates offer templates that serve your brand's campaign needs. Templates are designed to help users navigate easily and reach the end of the marketing funnel quickly. ## Requirements Complete the [Initial Website Integration](/v1/docs/initial-website-integration) before starting to use Insider One's Web Templates. To start designing a Web Template, 1. Navigate to **Campaigns** > **Optimization** > **Web Templates**. 2. Click the **Create** button in the top right corner.![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-E0QNK5MX.png) 3. Name your campaign, then click **Create** to start configuring its steps. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-UOW1TPNQ.png) > [!NOTE] > The name of your campaign can be up to 255 characters. 1. You land on the Default Templates page, where you can view all the templates in the first step in an organized way. Here, you can: - Select the platform on which you will create your campaign. - Search for the template. - View templates based on your objectives. - See whether the template is on-page or inline. - See the available elements for a template when you click it in the drawer menu. - View templates you saved before under Custom Templates. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-K6IZTTVY.png) 1. When you select a template, you can see its objective and description, as well as the elements available for it. Choose the template you want to use in your campaign, choose the platform, and proceed. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-R09CB8VG.png) ## Preview tab After you select your template, you will see it on your website in the Action Builder's Preview tab. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-F2PWEV7B.png) On the top banner of this page, you can see **Size**, **Position**, and **Navigate Mode** options, as well as platform icons if your template is for cross-platform; you can switch between them to see how your campaign looks on each platform. - **Navigate Mode** helps you navigate through your web pages to place your campaign. - **Size** menu helps you to set the width and height of the template. - **Position** menu helps you place your on-page campaign anywhere on the website. You can select any other place via the default placement options or give margins. > [!WARNING] > For the Action Builder, you should whitelist "*useinsider.com" or services mentioned below within your Content Security Policy: > > - skeleton-design-bundle.useinsider.com > > - skeleton-template-generator.api.useinsider.com > > - wss://skeleton-websocket.api.useinsider.com/v1 > > or, you should install the [Insider Chrome Extension](https://chromewebstore.google.com/detail/insider-tools-extension/fnecdmjccbhicpabhgalobcbnoieedon) for your Chrome browser. Otherwise, you might be unable to load your website or design your templates smoothly. Two types of templates are available: - **Inline template**: You can place your template anywhere on the page and select an element to [append](https://academy.useinsider.com/docs/append-an-inline-template). - **On-page template**: By default, elements are positioned within the page layout. You can adjust their position using the **Position** button. ## Design tab After positioning your template, you can customize it in the Design tab. - If your template is for cross-platform, you can use the **Sync All Platforms** option. When Sync All Platforms is enabled, all changes you make will instantly apply to Mobile, Tablet, and Desktop. Therefore, you can select the platform to which all platforms will be synchronized. Switching between platform icons right next to the Sync All Platforms toggle, you can see how your template looks on each. Only the layout selections won’t apply to all platforms, even when sync is on, as a rule. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-OSAL0EUA.png) You can turn off the sync toggle if you want to make separate changes on different platforms. - **Advanced Settings** on the top bar let you add custom CSS to change the site or run custom JavaScript on the website.![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-E7CFFMEZ.png) You can watch the video below to see what Top Bar offers in the Action Builder: [Navigation in AB: Top Bar ](https://player.vimeo.com/video/1172829210?badge=0&autopause=0&player_id=0&app_id=58479) > [!NOTE] > If this video does not load in your region, you can watch it on our [YouTube Channel](https://youtu.be/O7ujw0QKjc0). Then, configure your settings to customize your template's design. When you customize your campaign template, you can use components such as text, overlays, and animations. Therefore, you can beautify it and tune it to your website. You might find these categories helpful while creating your Web Template campaigns: - [Template Configurations](/v1/docs/template-configurations) - [Template Specific Configurations](/v1/docs/template-specific-configurations) - [Layout Configurations](/v1/docs/layout-configurations) - [Element Configurations](/v1/docs/element-configurations) - [Element Specific Configurations](/v1/docs/element-specific-configurations) - [Settings Specific Configurations](/v1/docs/settings-specific-configurations) You can also benefit from the video below to see how Action Builder helps you tailor your template: [Side Menus](https://player.vimeo.com/video/1172829790?badge=0&autopause=0&player_id=0&app_id=58479) > [!NOTE] > If this video does not load in your region, you can watch it on our [YouTube Channel](https://youtu.be/AQfHbHmsfuY). Each template offers different benefits to help your campaigns reach your goals. The use cases below help you get more out of them: - [Use Cases to Increase Conversion Rate](/v1/docs/use-cases-to-increase-conversion-rate) - [Use Cases to Increase Engagement](/v1/docs/use-cases-to-increase-engagement) - [Use Cases to Collect Leads](/v1/docs/use-cases-to-collect-leads) - [Use Cases to Collect Feedback](/v1/docs/use-cases-to-collect-feedback) - [Use Cases to Increase App Install Rate](/v1/docs/use-cases-to-increase-app-install-rate) - [Use Cases to Decrease Cart Abandonment Rate](/v1/docs/use-cases-to-decrease-cart-abandonment-rate) - [Use Cases to Increase Average Order Value](/v1/docs/use-cases-to-increase-average-order-value) ## Related - [Add a Campaign Variant](/add-a-campaign-variant.md) - [Segment a Web Template](/segment-a-web-template.md) - [Define Rules for a Web Template](/define-rules-for-a-web-template.md) - [Configure Goals for a Web Template](/configure-goals-for-a-web-template.md) - [Launch a Web Template](/launch-a-web-template.md)