In this guide we will demonstrate how you can use Nexweave’s chrome extension to add personalized images, GIFs, videos and text to your website, without any coding!
Before you begin personalizing your webpage, the following initial setup is required:
Install the Nexweave - website personalization chrome extension
Add the Nexweave script tag to your website.
You can find a step-by-step guide to complete this setup here
Once your setup is complete, proceed to selecting the templates and then personalizing your web page!
Preparing the Nexweave Media Assets
Create/ select the templates that you would like to embed in your website and create a campaign with them.
1. You can create image and video templates from scratch or clone any existing templates to edit and make them your own.
2. Once you have identified the templates you would like to use, create a Quick campaign for each template
Please note: The website personalization extension only allows you to select Quick campaigns to embed templates. Additionally a maximum of 5 campaigns can be selected to embed in templates.
3. To create a Quick campaign, In your template library, against the template you’d like to use, click on the menu and select Use
4. You will be able to see the variables employed in this campaign and run a quick campaign from here. You can enter custom values for the personalization variables used and click on Test to preview the template with those values
5. In the Quick campaign input box under the video, enter a name for the quick campaign and click on Quick Campaign. Your campaign is launched and ready to be invoked using the plugin!
The same method for launching quick campaigns can be used for image and video templates
Now that your campaigns are launched, proceed to your website to personalize it.
Personalize your website
The Nexweave chrome extension can be invoked and used directly into the published version of your website or landing page.
Additionally, personalized text and elements can only be added to existing components and div tags on your published website. It is therefore important to first build out the entire layout for your website and then to use the Nexweave extension to add personalization.
Please also note:
You can only add a personalized image to a pre-existing image component, ie the personalized image will have to be added in the same position as an existing placeholder image.
Personalized videos and text can be added inside any div tag (container for HTML elements)
While personalized text can be added inside any div tag, it’s appearance (size, font etc) cannot be altered without coding within the plugin. You can however replace existing text on the website (which is formatted while creating the webpage) with personalized elements
1. Open the webpage you would like to personalize. On the page, open the website personalization extension, and click on Start Editor
2. If this is your first time accessing the website, you will also be requested to enter an API key.
3. As you start the editor the following will appear:
Toolbar will appear at the top, from which you see the personalization changes made, as well as save or reset any changes
The personalization editor (may appear minimized) in the bottom right or left corner of the page. This can be moved to your preferred corner as well
4. From the personalization editor, select the campaigns you want to use in your website. You can select upto 5 campaigns from this list
Please note: as mentioned earlier, only quick campaigns feature in this list
5. Once you select your campaigns, you will have to click outside the dropdown and then click on Use Campaigns to confirm the selection.
Once the campaigns are selected, you will see a confirmation modal stating “campaign data has been successfully imported
Your campaigns are successfully imported! You can now proceed to adding elements of personalization to your website
Text Personalization
1. To edit the text, click on the text component or a div tag, the editor will appear containing the available personalization variables you can incorporate in the text
The available personalization variables are a union of all the personalization variables used in all the selected templates and campaigns.
2. In the text editor, type in your desired text message and click on the personalization variables available in the list to add it to your text message.
Adding Personalized Images
1. To add the personalized image, click on an existing image component. The editor will appear listing the available image templates (based on the campaigns you have selected)
2. Click on the personalized image you would like to appear instead of the placeholder image on your website
Please note: the image cannot be resized inside the website. The size depends on the size of the image container.
Adding Personalized Video
1. To add a personalized video, click on a div tag, or an element container. The editor will appear giving you the option to add text or video.
2. Click on the video tab. From this list of videos below (these depend on the campaigns you have selected), select the video you would like to embed in this position.
Please note: the size of the video and the position cannot be edited with the plugin. It will adhere to the size of the container and the alignment and position set while creating the website layout
Your personalization is complete! Click on Save to confirm and save all your changes.
You can undo the single element changes from the landing page by clicking on the element and then clicking on Remove Changes
10. You can also remove all personalization by clicking on the Reset button in the top toolbar
Your webpage is now ready, but it still displays the variable names instead of values.
Let's take a look at how we can override these variable values in the article - Overriding website variables