Did you know you can receive an SMS notification each time a form is submitted on your WordPress site, eliminating the need for constant email or active website monitoring? If you’ve been searching for a practical method to stay updated on new inquiries from your site visitors, implementing SMS notifications from your contact form is […]
The post How To Send SMS Notifications from Contact Forms appeared first on WPExplorer.
Are you looking for the best way to gather useful feedback about your WooCommerce store from your active customers?
User surveys can help you get valuable information so you can use it to make data-driven decisions. For example, they can help you find out how to improve your sales funnel or why your customers bought a particular product.
In this article, we will show you how to easily create post purchase surveys in WooCommerce.
If you have a WooCommerce store, then you may be wondering what your customers think of your products and online store. There’s no easy way to find out without actually asking them.
Luckily, you can use a WordPress survey plugin to collect real user feedback quickly and easily. This feedback will help you discover the ‘why’ behind every website visitor’s action. This is something you can’t learn from Google Analytics alone.
When creating your customer survey, make sure you don’t add any unnecessary questions. The questions you ask should get you the most valuable information and insights.
Here are some examples of questions you can ask your customers after checkout:
By asking for user feedback after each WooCommerce purchase, you will learn ways you can improve your sales funnel to boost user experience and increase sales.
When you know the why or the intent behind users’ actions, you can easily figure out why your visitors buy or do not buy your products.
With that being said, let’s take a look at how to easily create post purchase surveys in WooCommerce. We will cover two different methods:
UserFeedback is an easy-to-use survey plugin by the MonsterInsights team. It lets you ask your website visitors questions and collect their feedback in real time. It also makes it easy to add the survey to specific WooCommerce pages, such as the order confirmation page.
UserFeedback includes a Post Purchase Review template to give you a head start in creating your survey. Plus, you can customize how your popup surveys look so that they completely match your brand and site design.
First, you need to install and activate the UserFeedback plugin. For step-by-step instructions, you can follow our tutorial on how to install a WordPress plugin.
Note: There is a free version of UserFeedback that you can use to get started. However, you will need the features of the Pro version to create a post purchase survey.
Setting Up the UserFeedback Plugin
Once the plugin is activated, the setup wizard will automatically launch. Click the ‘Start’ button to begin the setup.
Next, you will be prompted to create your first survey to show you what the plugin is capable of.
We won’t be using this example survey, so you can go ahead and use the default answers.
You can choose from a few pre-written questions or create your own question. You will also be able to change your questions at any time.
For this tutorial, you should simply click the ‘Next Step’ button to continue.
Next, you will see the option to enable specific UserFeedback features, depending on your license level.
Go ahead and enable the features you want or that your license level allows.
Once you have done that, you need to click the ‘Next Step’ button at the bottom of the page.
Now, you can enter the email address where you want the survey responses to be sent.
Since we won’t be using this survey, you don’t need to make any changes and can simply click the ‘Next Step: Publish’ button.
In the final step of the setup wizard, the features and addons you enable will be installed.
Then, you can click on the ‘Exit to dashboard’ button at the bottom of the page.
You will see the sample ‘First Survey’ that you created with the wizard.
Now you can unlock the Pro features of the plugin. You need to enter the license key that was emailed to you when you purchased a UserFeedback plan.
You will need to navigate to UserFeedback » Settings in the WordPress admin area. Once there, simply paste your license key into the field and click the ‘Verify’ button.
Make sure you click the ‘Save Settings’ button once you have done this.
After that, you can enable the Pro features by going to the UserFeedback » Addons page.
For each addon, you will need to click the ‘Install Addon’ button, followed by the ‘Activate’ button that appears.
This is important since the Additional Templates addon includes a Post Purchase Review template, and the Question Types addon allows you to add star ratings and more. Other addons allow you to further customize your survey form.
Now that you have successfully installed the UserFeedback plugin and its addons, you are ready to create your post purchase survey.
Creating a Post Purchase Survey Using UserFeedback
To create a new survey, you need to return to the UserFeedback » Surveys page and click the ‘Create New’ button.
This will show you dozens of survey templates that you can use as a starting point.
You need to scroll down until you find the Post Purchase Review template and then click it.
A new survey will be created for you. Some helpful questions have already been added.
You can change any question’s type and title by simply pointing and clicking.
Each question has a Settings tab where you can set the question as ‘Required’. The Logic tab lets you show or hide the question based on the customer’s previous answers.
With UserFeedback, you can ask unlimited questions and receive unlimited responses. You can ask all types of questions, including multiple-choice and free-form questions, and even capture emails and collect star ratings.
You might like to add some of the questions we listed at the beginning of this article. To add a question to your survey, simply click the ‘Add Question’ button after the last question.
When you choose a question type from the dropdown menu, a new question will be added.
After that, you will be able to add a question title. Depending on the question type, you can then customize the question in other ways, such as labeling checkboxes or radio buttons.
Tip: The ‘Preview’ link at the top of the page doesn’t just preview the form but also allows you to customize its colors.
You can also create a custom thank you message and redirect users after their submissions.
When you have finished editing your survey questions, just hit the ‘Next Step: Settings’ button. This will open the Settings page, where you can customize your survey even more.
In the ‘Tracking’ section, you can enable or disable Google Analytics tracking if you have MonsterInsights installed.
Next, in the ‘Targeting’ section, you can select what types of devices and pages you want your survey to appear on. You can display the survey on all device types or create different surveys that target desktop and mobile users.
Next, you can scroll down to the Pages setting area. This is important because it allows you to choose where the survey will be displayed.
The default setting is ‘All Pages’. This will display the survey on every page of your online store. However, we only want to survey customers after they have made a purchase.
In this case, we should display the survey on the order confirmation page that is displayed after checkout. This page is also known as the WooCommerce thank you page.
To target this page, you will need to select ‘Page url is’ from the dropdown menu. After that, you should type ‘order-received’ in the next field.
This works because the setting matches partial URLs. The full URL will change with each transaction but will always contain the characters ‘order-received’.
You can also scroll down to the ‘Behavior’ section. Here, you can configure settings like:
In addition, you can enable or disable the ‘Start Survey Minimized’ option.
This displays a less visible version of your survey instead of automatically opening the first question.
Once you are done changing the settings, you can click the ‘Next Step: Notifications’ button.
This will take you to the Notifications page, where you can choose to send yourself an email with each new response to the survey. Simply leave the ‘Send Email’ toggle switched on and then enter one or more email addresses.
You can also enable conditional logic to trigger email notifications when visitors respond to your questions in a certain way.
For example, you might only want to receive an email if the user checks a box labeled ‘Do you want a callback?’
For this to work, your survey needs to contain at least one question with a radio, checkbox, NPS, or star rating question.
After that, click on the ‘Next Step: Publish’ button to continue.
Publish Your Survey
Lastly, there’s an option to schedule the survey for a later date and time.
If you are ready to publish your survey immediately, then go ahead and click the ‘Save and Publish’ button.
That’s it! You’ve successfully created a survey form.
Now when your customers purchase items from your store, your survey will pop up on the order confirmation page.
Tip: You may not see the customer survey when you are logged into WooCommerce. You will need to open your online store in a new incognito window or a different web browser.
Viewing Your Survey Form Results
Once you start getting responses, you can analyze them right from your WordPress admin dashboard using easy-to-read reports.
Simply navigate to UserFeedback » Results to see the total responses, impressions, and more details.
WPForms is the best WordPress contact form plugin on the market. It comes with a powerful surveys and polls addon, which allows you to quickly create highly-engaging survey forms.
It lets you combine the Surveys and Polls addon with powerful WPForms features like conditional logic, multi-page forms, custom notifications, email integrations, and more.
Note: You will need the Pro plan because it includes the WPForms Surveys and Polls addon. WPBeginner users can use our WPForms coupon to get 50% OFF on all WPForms licenses.
Setting Up the WPForms Plugin
The first thing you need to do is install and activate the WPForms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Once the plugin is activated, you need to go to the WPForms » Settings page and enter your license key. You will find this information in your account on the WPForms website.
Don’t forget to click the ‘Verify Key’ button.
Once you have done that, you should head over to the WPForms » Addons page and scroll down to the Surveys and Polls addon.
Go ahead and click on the ‘Install’ addon button to install and activate the addon.
Now you are ready to create the post purchase survey form.
Creating a Post Purchase Survey Using WPForms
You need to visit the WPForms » Add New page to create a new form. This will launch the WPForms form builder interface, and you can choose from different pre-built form templates.
First, you should provide a title for your survey form at the top of the page.
After that, you need to choose a template. Start by clicking on ‘Addon Templates’ to list templates that are compatible with the Surveys and Polls addon.
Then you need to click the ‘Use Template’ button on the Survey Form template. This will load a sample customer feedback form template with several fields already added to it.
You can just point and click to edit the fields, rearrange them with drag and drop, or remove them from the form. You can also add new form fields from the left column.
WPForms supports all commonly-used form fields, including dropdown, radio buttons, checkboxes, Likert scale, text input, rating scale, and many more. This makes it super easy for you to build highly-interactive survey forms.
There is some conditional logic already built into the form. For example, the ‘How can we improve?’ field will only appear if a user selects 1 or 2 stars in the ‘Your Experience’ field.
You can see this by selecting the ‘How can we improve?’ field and then clicking the ‘Field Options’ tab on the left, as seen in the image above.
If some of your customers log in to your online store, then you can make their life easier by auto-filling some of their information from their user profiles.
For example, to auto-fill their email address, you need to click on the Email field, then click the ‘Field Options’ tab on the left. Once there, just click on the ‘Advanced’ tab to show the advanced field options.
You will notice a field where you can set a Default Value for the email field.
You can enter information from their profile automatically by clicking on ‘Show Smart Tags’.
Now you simply click the ‘User Email List’ option, and the {user_email} smart tag will be entered into the field. This will automatically add the email address for logged-in users.
You can also easily remove any fields that you don’t need on the form.
For example, if you would like to remove the ‘Name’ field, then you should point at that field with your mouse and then click the red Trash icon that appears at the top right of the field.
If you would like to add more questions, such as the ones we listed at the beginning of this article, simply drag a new field onto the page and then customize it.
Once you have created the form, you need to click the orange ‘Save’ button at the top of the page to store your form settings.
Next, you can go to the Settings tab and select ‘Confirmations’ in the WPForms form builder.
Here, you can choose whether to show a message or a page or even redirect users to a URL when they submit the survey form.
Besides that, the WPForms Notifications tab lets you edit the notification settings so that you get email alerts when a user fills out your survey.
You can now click on the close button to exit the form builder.
Adding the Survey Form to a Custom Thank You Page
If you have gone through the trouble of creating a custom WooCommerce thank you page, then you can easily add your post purchase survey to it using a shortcode or a block.
Note: Whether you are using the default thank you page or a custom one, you can also display the survey as a popup using a plugin. See the next section for details.
You will find the shortcode you need by visiting the WPForms » All Forms page.
You can then use the shortcode to add the form to your custom thank you page by following our guide on how to add a shortcode in WordPress.
Alternatively, if you created your custom thank you page using the block editor or a page builder plugin like SeedProd, then all you need to do is drag the WPForms widget onto the page and then pick the survey form you just created from a dropdown menu.
Once you have saved your custom thank you page, your customers will see the survey after checking out.
Automatically Showing a Survey Popup Using OptinMonster
You might prefer to have the survey pop up automatically over the order confirmation page, similar to what happens with the UserFeedback plugin in Method 1.
The first thing you need to do is install the free OptinMonster plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Note: In this tutorial, we will use the free OptinMonster plugin because it does everything we need. However, with a Growth subscription, the premium version of OptinMonster has much stronger integration with WooCommerce.
Upon activation, the OptinMonster setup wizard will start.
Simply follow the onscreen instructions to set up OptinMonster on your website and create a free account.
Once you complete the setup, you will find yourself on the OptinMonster dashboard.
You will see a welcome message, a link to the OptinMonster user guide, and a video to help you get started.
Now you will need to scroll down until you find a box where you can create a new popup.
Simply click the ‘Create New’ link.
You will now see a collection of popup templates. Since our popup will just contain our post purchase survey, we will use the minimal Canvas template.
You can find this template by typing ‘canvas’ into the search field.
When you point your mouse over the Canvas template, two buttons will appear.
You can create your popup by clicking the ‘Use Template’ button.
You will see a popup asking you to give the campaign a name.
You can type in ‘Post Purchase Survey’ and then click the ‘Start Building’ button.
The OptinMonster builder will open with your selected template. You can see a preview of the popup on the right, and there are blocks on the left that you can add to the popup.
You need to find the WPForms block and drag it onto the page.
You can now select the survey you want to add.
Simply click on the name of the WPForms post purchase survey that you created earlier. The WPForms shortcode will be added to your popup.
There is still a placeholder image and text block on the page. These can be safely deleted.
When you hover your mouse over the image, a purple toolbar will appear. You can delete the image by clicking the Trash icon. You will be asked to confirm the deletion.
You can delete the text block that says ‘Drag blocks and elements to start building your campaign’ in the same way.
Your finished popup should include just the WPForms shortcode. This is a good time to save your work by clicking the ‘Save’ button at the top of the screen.
Your next job is to click the ‘Display Rules’ tab and set how and where the popup will be displayed.
The first rule determines when the popup will be shown. The default value is after you have been on the page for 5 seconds. This will work for most online stores, but you can change the value if you like.
Now you need to scroll down to the second rule, which you will find just below the ‘AND’ label.
The default value is to display the popup on every page of your WordPress website. You need to change this so that it only displays the post purchase survey on the order confirmation page.
To do this, you need to click the dropdown menu for ‘is any page’ and select ‘contains’ instead.
Another field will appear, and you need to type ‘order-received’ here.
This rule will match the confirmation page URL. Although the URL changes with every transaction, it will always contain the characters ‘order-received’.
Now you can click the ‘Next Step’ button to determine what happens when the conditions in those two rules are met.
The default settings here will display the popup without any effects or sound. If you would like to add an effect or sound, just use the dropdown menus.
Once you are finished, you need to click on the ‘Next Step’ button. You will see a summary of the display rules you just created.
Make sure you click the ‘Save’ button to store your settings.
Finally, you can click the ‘Publish’ tab at the top of the screen and then click the ‘Publish’ button under ‘Publish Status’. This will push the popup live on your online store.
You can now close the OptinMonster builder by clicking the ‘X’ icon in the top right corner.
Your customers will now see the post purchase survey whenever they finish checking out. Here’s how it looks in our demo store.
Viewing Your Survey Form Results
WPForms shows survey results in beautiful charts and graphs. You can also print survey results and export them to your favorite spreadsheet software.
To view your survey results, you need to visit the WPForms » All Forms page and click on the ‘Survey Results’ link below your survey form.
On the results page, you will see your survey responses displayed in an interactive chart and tables.
You can export responses to a single question and the entire survey.
On the top, you will see options to switch to different chart types and export options.
You can save individual survey results in JPEG, PDF, and Print formats to easily share them on presentation slides, blog posts, or social media.
We hope this tutorial helped you learn how to create post purchase surveys in WooCommerce. You may also want to see our guide on how to create smart coupons in WooCommerce or our expert picks for the best WooCommerce plugins for your store.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Easily Create Post Purchase Surveys in WooCommerce first appeared on WPBeginner.
Are you looking for a way to display nutrition facts labels in WordPress?
Nutrition facts labels provide information about the nutrient content of food, including the number of calories, protein, fat, carbohydrates, and more. These labels help users make better-informed health decisions according to their diets.
In this article, we will show you how to easily add nutrition facts labels in WordPress.
If you are a food blogger or sell food items in your online store, then adding nutrition facts labels along with your recipes and products can help you comply with any regulatory food requirements.
By informing consumers about the calorie content, carbs, protein, and other nutrients of your meals, you also enable them to make informed decisions about their diets.
For instance, adding a nutrition facts label with a recipe will allow diabetic people to monitor their sugar intake and remain healthy.
Adding nutrition facts labels can also boost the SEO rankings of your WordPress blog. This is because search engines usually prioritize websites that enhance the user experience by providing relevant information about their products.
That being said, let’s see how you can easily add nutrition facts labels in WordPress.
You can easily add nutrition facts labels in WordPress using Nutrifox.
It is an online nutrition label generator that allows users to create and customize nutrition labels for their food products or recipes.
Create a Nutrition Facts Label With Nutrifox
First, you will need to visit the Nutrifox website and sign up for an account by clicking on the ‘Start Your Free Trial’ button in the top right corner of the screen.
Nutrifox offers a 14-day trial to everyone, after which you will be charged about $9/month or $89/year.
Upon creating an account, you will be directed to the ‘Welcome to Nutrifox’ page.
From here, simply click on the ‘Create Your First Recipe’ button to get started.
Next, you will be directed to a new screen, where you must enter a name for the recipe that you are about to create.
Once you have added a recipe name, just click the ‘Continue to Ingredients’ button.
Note: If you want, then you can also import a published recipe to Nutrifox from your WordPress website by clicking on the ‘import a published recipe’ link.
This will take you to a new screen where you will create the recipe. Here, you will be able to see the nutrition facts label in the right column of the screen.
You can now start by filling in the fields for the serving size and the number of servings.
For instance, if you are writing a recipe for a red velvet cake, then you will need to add 1 slice as the serving size. After that, you must add the number of slices that will be in the cake under the ‘Servings’ option.
Once you have done that, simply type the recipe ingredients into the ‘Ingredients’ section and click the ‘Add’ button.
After the recipe has been added, the nutrition facts label will automatically update.
Customize Your Nutrition Facts Labels
Now, you have to click on the ‘Customize’ button in the right column to style the facts label.
From here, go ahead and choose the ‘Label Style’ from the dropdown menu. You can pick ‘Tasty’, ‘FDA’, or ‘Basic’.
After that, you can also select the nutrients that you want to be displayed on the nutrition facts label by toggling the switch next to these options.
For instance, if you want to display the percentage of calcium in the meal, then you need to toggle the switch next to the ‘Calcium’ option.
Once you are happy with your nutrition facts label, you need to copy the label’s
Once you are happy with your nutrition facts label, you need to copy its ID from the Nutrifox website’s URL.
This label ID is a 4 to 5-digit number that will allow you to embed the facts label into your WordPress website.
Add the Nutrition Facts Labels to a WordPress Post
After copying the label ID, head over to your WordPress website’s dashboard.
Once you are there, you need to install and activate the Nutrifox WP Connector plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.
This plugin will add a ‘Nutrifox label’ block to the Gutenberg editor that will allow you to show nutrition facts labels along with your recipes.
Upon plugin activation, open up the page or post where you want to add the facts label. Next, you must click the ‘+’ button in the top left corner of the screen and find the ‘Nutrifox Label’ block.
Upon adding the block, simply paste the Nutrifox label ID that you copied earlier into the block.
Finally, go ahead and click the ‘Publish’ or ‘Update’ button to save your changes.
You can now visit your website to check out the nutrition facts label in action.
Tasty Recipes is a great WordPress recipe plugin that allows you to optimize your food blog for recipe SEO. It also lets you adjust the design and layout of your recipe cards.
Additionally, it enables you to integrate your recipe cards with Nutrifox to add nutrition facts labels along with the recipes.
First, you need to install and activate the Tasty Recipes plugin. For detailed instructions, check our guide on how to install a WordPress plugin.
Upon activation, head over to the Settings » Tasty Recipes page and enter the license key. You can get your license key from your Tasty Recipes accounts page.
After that, simply switch to the ‘Design’ tab on the ‘Tasty Recipes’ page.
From here, you can choose a design template for the recipe card from the preview column on the right.
You can also further customize the template with the on-screen settings on the left of the screen.
Once you have designed your recipe card template, scroll down to the ‘Nutrifox Display’ section and make sure that the ‘Insert Nutrifox label (iframe)’ option is checked.
If you choose the ‘Insert as plain text’ option, you will need to manually enter the details for the nutrition facts labels.
Once you are happy with your choices, don’t forget to click the ‘Save Changes’ button to store your settings.
Next, switch to the ‘Settings’ tab at the top to configure the plugin options.
From here, you can choose which buttons to show on the recipes, display check boxes next to ingredients, allow users to convert units, and scale recipes for different serving sizes.
You can also allow users to copy the ingredients with a single click and paste the recipe somewhere else.
Finally, don’t forget to click on the ‘Save Changes’ button to store your changes.
Add the Recipe Card and Nutrition Facts Label to a WordPress Post
To add the recipe card and nutrition facts label to your website, you need to open up a new or existing post in the block editor from the WordPress admin sidebar.
Once you are there, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Tasty Recipe’ block.
Upon adding the block, a ‘Create Recipe’ popup will open in the block editor. Here, you can start by adding a title, description, image, and author name for the recipe card.
Next, type the ingredients for the recipe into the ‘Ingredients’ section and add the instructions for users to follow in the ‘Instructions’ section.
After that, just scroll down to the ‘Nutrition’ section, where you have to add the label ID for the nutrition fact labels.
For that, you will have to visit the Nutrifox website and open up the nutrition facts label that you want to integrate with the recipe.
Once you are there, you can get the label ID from the website’s URL. It will be a 4 to 5-digit number at the end of the URL.
Simply copy it and head back to your WordPress dashboard.
Next, you have to paste the label ID into the ‘Nutrifox ID’ box. Once you are done, just click the ‘Insert’ button to add the recipe card to the block editor.
Finally, click the ‘Update’ or ‘Publish’ button to save your changes.
You can now visit your website to check out the recipe card with the nutrition facts label integrated into it.
We hope this article helped you learn how to display nutrition facts labels in WordPress. You may also want to see our tutorial on how to add SEO-friendly recipe schema in WordPress and our top picks for the best WordPress themes for recipe blogs.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Display Nutrition Facts Labels in WordPress first appeared on WPBeginner.
Looking for ways to further optimize your WordPress site’s performance? Easy…switch on Hummingbird‘s new Delay JavaScript Execution feature!
Most sites nowadays are laden with JavaScript files and inline scripts, which can be resource intensive and affect site performance and PageSpeed scores in areas like site rendering and load time.
As you will learn in this article, delaying the execution of JavaScript files to prioritise the load of more critical elements first can keep the overall load time of your site in check and improve your PageSpeed scores.
Even better, we’ll show you how to automate the whole process with just one click using our WordPress optimization plugin, Hummingbird.
In this article, we’ll look at:
Let’s jump right in…
As mentioned earlier, sites nowadays are loaded with 3rd-party scripts for serving advertisements, tracking engagement, security verification, etc., which can block pages from rendering quickly on users’ browsers and affect your site’s user experience and search engine rankings.
Holding these scripts off from loading on your site until there’s actual user interaction with the page can significantly improve areas of your site’s performance like:
By delaying the execution of JavaScript files until users interact with the page, web pages will load faster, allowing users to access and interact with the site more quickly. This helps improve user experience and increase user engagement.
Browser rendering engines need to process JavaScript before they can display the page content. Delaying JavaScript execution until after users interact the page content has been loaded helps the browser render the page more quickly and efficiently. This means users can see and interact with the web page sooner.
Combining JavaScript files and loading them asynchronously can reduce the number of HTTP requests made to the server, which also helps to speed up page loading times.
Google considers page speed as a ranking factor for search results, and delaying JavaScript execution can improve your site’s PageSpeed Insights score, potentially leading to better search engine rankings.
By loading JavaScript asynchronously and combining files, fewer requests are made to the server, reducing its workload, and helping to prevent server crashes or slow responses during high-traffic situations.
Delaying JavaScript execution on your site can improve your Google PageSpeed score by addressing the following recommendations:
This recommendation suggests eliminating unused or unnecessary JavaScript code from your web pages. Unused JavaScript can increase your page’s load time, as the browser has to download, parse, and execute the code even if it’s not being used.
By removing any unused JavaScript code, you can decrease the file size and improve your website’s overall performance.
Total blocking time is a metric that measures the amount of time between the First Contentful Paint (FCP) and the Time to Interactive (TTI) during which the main thread was blocked for long enough to prevent input responsiveness.
In simple terms, it quantifies the duration when the page becomes unresponsive due to processing heavy JavaScript tasks. Lowering the total blocking time makes your website more responsive and improves user experience.
The main thread is responsible for executing JavaScript, style calculations, layout, and other tasks required to display a web page. Minimizing main thread work refers to the process of optimizing the code and reducing the time the main thread spends on heavy tasks. This can be done by removing unnecessary JavaScript, splitting long tasks into smaller chunks, and optimizing the code’s execution.
A lighter workload on the main thread results in faster page loading, improved rendering, and enhanced user experience.
This performance metric measures the time it takes for a web page to become fully interactive and responsive to user input. A page is considered interactive when the main thread is free from heavy tasks, and users can interact with the elements on the screen, such as clicking buttons or scrolling.
Improving the TTI by optimizing JavaScript, splitting large tasks, and reducing render-blocking resources ensures a better user experience by allowing users to interact with the page more quickly.
Reducing JavaScript execution time involves optimizing the code to execute faster and use fewer resources. This can be achieved through techniques such as code minification, removing unused JavaScript, and optimizing algorithms.
Reducing the execution time leads to faster rendering, decreased total blocking time, and better responsiveness, providing a better user experience.
This is a performance metric that measures the time it takes for the browser to render the first visible element (text, image, or other content) of a web page. A faster FCP equates to a quicker initial page load, providing users with a visual feedback that the page is loading. Improving FCP requires optimizing critical rendering paths, delaying non-critical JavaScript execution, and prioritizing the loading of visible content.
A faster FCP significantly contributes to a better user experience and improved web page performance.
While faster page load times, reduced render-blocking, and prioritized content loading provide many benefits to users and can deliver higher PageSpeed scores, the actual methods available for delaying JavaScript execution on WordPress sites can be challenging for users without technical knowledge or web optimization skills.
For example, these methods can include:
While there are a few WordPress plugins available that can handle some of these tasks for you and help you to delay or defer JavaScript execution, our Hummingbird plugin does all of the above and more with the click of a button.
The new optimization feature of Hummingbird delays the loading of all JavaScript files and inline scripts until there is user interaction on the page (e.g. mouse movement, keyboard action or screen tap) and improves all of the PageSpeed recommendations described earlier.
To enable this feature, make sure that Hummingbird is installed and activated on your site, then navigate to Hummingbird > Asset Optimization > Extra Optimization in your WordPress admin and switch on the Enable Delay Javascript toggle button in the Tools > Delay Javascript section, then click Save Changes.
Alternatively, you can enable the feature from the plugin’s main dashboard.
Once the Delay JavaScript Execution feature has been enabled, it automatically goes to work, delaying the loading of any non-critical JavaScript files on your page that are not required above-the-fold.
The feature’s settings give you access to options like being able to specify a timeout for the scripts to load if no user interaction is detected, and the option to exclude critical JavaScript files from from being delayed on load by specifying their URLs or keywords.
If enabling this feature breaks something on your site and you identify additional critical Javascript resources which are essential to render the page, simply add them to the Excluded JavaScript Files area to exclude them from being delayed.
If there is no user interaction on the page beyond a set threshold, the JavaScript assets are forced to load. The default timeout is set to 20 seconds, but you can select a different value from the Timeout dropdown menu (currently ranging between 5-30 seconds).
Notes
Hummingbird’s Delay JavaScript feature is available in both the Pro and free versions of the plugin. We recommend enabling this feature and testing your site using the PageSpeed Insights tool.
If you experience any issues using Hummingbird, check out the plugin’s documentation or contact our 24/7 support team for immediate expert support.
Looking for ways to further optimize your WordPress site’s performance? Easy…switch on Hummingbird‘s new Delay JavaScript Execution feature!
Most sites nowadays are laden with JavaScript files and inline scripts, which can be resource intensive and affect site performance and PageSpeed scores in areas like site rendering and load time.
As you will learn in this article, delaying the execution of JavaScript files to prioritise the load of more critical elements first can keep the overall load time of your site in check and improve your PageSpeed scores.
Even better, we’ll show you how to automate the whole process with just one click using our WordPress optimization plugin, Hummingbird (note: Pro feature only).
In this article, we’ll look at:
Let’s jump right in…
As mentioned earlier, sites nowadays are loaded with 3rd-party scripts for serving advertisements, tracking engagement, security verification, etc., which can block pages from rendering quickly on users’ browsers and affect your site’s user experience and search engine rankings.
Holding these scripts off from loading on your site until there’s actual user interaction with the page can significantly improve areas of your site’s performance like:
By delaying the execution of JavaScript files until users interact with the page, web pages will load faster, allowing users to access and interact with the site more quickly. This helps improve user experience and increase user engagement.
Browser rendering engines need to process JavaScript before they can display the page content. Delaying JavaScript execution until after users interact the page content has been loaded helps the browser render the page more quickly and efficiently. This means users can see and interact with the web page sooner.
Combining JavaScript files and loading them asynchronously can reduce the number of HTTP requests made to the server, which also helps to speed up page loading times.
Google considers page speed as a ranking factor for search results, and delaying JavaScript execution can improve your site’s PageSpeed Insights score, potentially leading to better search engine rankings.
By loading JavaScript asynchronously and combining files, fewer requests are made to the server, reducing its workload, and helping to prevent server crashes or slow responses during high-traffic situations.
Delaying JavaScript execution on your site can improve your Google PageSpeed score by addressing the following recommendations:
This recommendation suggests eliminating unused or unnecessary JavaScript code from your web pages. Unused JavaScript can increase your page’s load time, as the browser has to download, parse, and execute the code even if it’s not being used.
By removing any unused JavaScript code, you can decrease the file size and improve your website’s overall performance.
Total blocking time is a metric that measures the amount of time between the First Contentful Paint (FCP) and the Time to Interactive (TTI) during which the main thread was blocked for long enough to prevent input responsiveness.
In simple terms, it quantifies the duration when the page becomes unresponsive due to processing heavy JavaScript tasks. Lowering the total blocking time makes your website more responsive and improves user experience.
The main thread is responsible for executing JavaScript, style calculations, layout, and other tasks required to display a web page. Minimizing main thread work refers to the process of optimizing the code and reducing the time the main thread spends on heavy tasks. This can be done by removing unnecessary JavaScript, splitting long tasks into smaller chunks, and optimizing the code’s execution.
A lighter workload on the main thread results in faster page loading, improved rendering, and enhanced user experience.
This performance metric measures the time it takes for a web page to become fully interactive and responsive to user input. A page is considered interactive when the main thread is free from heavy tasks, and users can interact with the elements on the screen, such as clicking buttons or scrolling.
Improving the TTI by optimizing JavaScript, splitting large tasks, and reducing render-blocking resources ensures a better user experience by allowing users to interact with the page more quickly.
Reducing JavaScript execution time involves optimizing the code to execute faster and use fewer resources. This can be achieved through techniques such as code minification, removing unused JavaScript, and optimizing algorithms.
Reducing the execution time leads to faster rendering, decreased total blocking time, and better responsiveness, providing a better user experience.
This is a performance metric that measures the time it takes for the browser to render the first visible element (text, image, or other content) of a web page. A faster FCP equates to a quicker initial page load, providing users with a visual feedback that the page is loading. Improving FCP requires optimizing critical rendering paths, delaying non-critical JavaScript execution, and prioritizing the loading of visible content.
A faster FCP significantly contributes to a better user experience and improved web page performance.
While faster page load times, reduced render-blocking, and prioritized content loading provide many benefits to users and can deliver higher PageSpeed scores, the actual methods available for delaying JavaScript execution on WordPress sites can be challenging for users without technical knowledge or web optimization skills.
For example, these methods can include:
While there are a few WordPress plugins available that can handle some of these tasks for you and help you to delay or defer JavaScript execution, our Hummingbird plugin does all of the above and more with the click of a button.
The new optimization feature of Hummingbird delays the loading of all JavaScript files and inline scripts until there is user interaction on the page (e.g. mouse movement, keyboard action or screen tap) and improves all of the PageSpeed recommendations described earlier.
To enable this feature, make sure that Hummingbird is installed and activated on your site, then navigate to Hummingbird > Asset Optimization > Extra Optimization in your WordPress admin and switch on the Enable Delay Javascript toggle button in the Tools > Delay Javascript section, then click Save Changes.
Alternatively, you can enable the feature from the plugin’s main dashboard.
Once the Delay JavaScript Execution feature has been enabled, it automatically goes to work, delaying the loading of any non-critical JavaScript files on your page that are not required above-the-fold.
The feature’s settings give you access to options like being able to specify a timeout for the scripts to load if no user interaction is detected, and the option to exclude critical JavaScript files from from being delayed on load by specifying their URLs or keywords.
If enabling this feature breaks something on your site and you identify additional critical Javascript resources which are essential to render the page, simply add them to the Excluded JavaScript Files area to exclude them from being delayed.
If there is no user interaction on the page beyond a set threshold, the JavaScript assets are forced to load. The default timeout is set to 20 seconds, but you can select a different value from the Timeout dropdown menu (currently ranging between 5-30 seconds).
Notes
Hummingbird’s Delay JavaScript feature is available as a Pro feature only. We recommend enabling this feature and testing your site using the PageSpeed Insights tool.
If you experience any issues using Hummingbird, check out the plugin’s documentation or contact our 24/7 support team for immediate expert support.
Do you want to easily embed TikTok videos on your WordPress website?
If you’re already creating successful, viral TikToks then it makes sense to post these videos to your website too. In this way, you can get more views, engagement, and social media followers with very little extra effort.
In this article, we’ll show you how to easily embed TikTok videos in WordPress.
According to our ultimate list of blogging stats, posts with videos get 83% more traffic than those without video. That said, if you’re already posting TikToks then it makes sense to embed these videos on your WordPress website.
In this way, you can get more visitors, without having to spend a ton of time creating new content. These videos can also help capture the visitor’s attention and keep them on your website for longer, which will increase pageviews and reduce bounce rate in WordPress.
At the same time, these videos will promote your TikTok channel to people who visit your website. This can get you more engagement and followers on TikTok.
With that said, let’s see how you can embed TikTok videos in WordPress. Simply use the quick links below to jump straight to the method you want to use.
The easiest way to embed TikToks on your WordPress site is by pasting the video’s URL into the page or post editor. WordPress will then detect the video and fetch it for you automatically.
First, you need to visit the TikTok video that you want to embed. Then, copy the video’s URL.
Next, open the WordPress page or post where you want to show the TikTok video. You can then simply paste the URL into the WordPress block editor.
WordPress will automatically detect that you’re embedding a TikTok video, and add a TikTok block with the video already embedded.
By default, WordPress will resize the TikTok video automatically for smaller screens, including smartphones and tablets. It will also preserve the video’s ratio when the browser gets resized.
This is a good user experience, so we recommend leaving the setting enabled. However, sometimes you may want to keep the video at the same size, no matter what. In that case, click to select the TikTok block and then disable the ‘Resize for smaller devices’ toggle.
If you do disable this setting, then it’s a good idea to test the mobile version of your WordPress site from the desktop, to check you’re happy with the visitor experience.
You can get similar results by adding the TikTok block to a page or post. After that, you can add the TikTok video’s URL at any point.
This is useful if you’re unsure what TikTok video you’re going to embed, or if the video hasn’t been published yet. This is also a good way to plan your layout, particularly if you’re designing a landing page or sales page.
To add a TikTok block, simply click on the ‘+’ icon and then type in ‘TikTok.’
When the right block shows up, click to add it to the page or post.
After that, you can simply paste the TikTok URL into the block and click on ‘Embed.’
Another option is to embed the TikTok video in a widget-ready area such as the sidebar or similar section. This allows you to show the same video across your entire site. For example, if you’re trying to create a viral giveaway in TikTok, then you might embed the video announcing the contest.
To do this, go to Appearance » Widgets in your dashboard. Here, you’ll see all the different areas where you can add widgets in WordPress.
Simply find the area where you want to embed the TikTok video.
Then, click on the ‘+’ icon.
In the popup that appears, type in ‘TikTok.’
When the right block shows up, click to add it to the widget-ready area.
You can now paste the URL of the TikTok video you want to embed.
With that done, click on the ‘Embed’ button.
When you’ve finished, don’t forget to click on ‘Update’ to make the changes live.
You can now visit your WordPress blog or website to see the TikTok video live.
If you’re using a block theme then you can add a TikTok to any widget-ready area or template using the full-site editor. This allows you to show TikTok videos on pages and posts that you can’t edit using the standard content editor. For example, you might use TikTok videos to improve your 404 page template.
In your WordPress dashboard, go to Themes » Editor.
By default, the full-site editor will show your theme’s home template.
If you want to add the TikTok video to a different area, then click on either ‘Template’ or ‘Template Parts.’
You’ll now see all the templates or template parts that make up your WordPress theme.
Simply find the template where you want to embed a TikTok video and click on it. As an example, we’ll be adding a TikTok to the Archive page template but the steps will be largely the same no matter what template you’re using.
WordPress will now show a preview of the template.
To go ahead and edit the layout, click on the small pencil icon.
With that done, click on the ‘+’ button towards the top left of the screen.
In the search bar that appears, type in ‘TikTok.’
When the right block shows up, drag and drop it onto the layout.
You can now paste the video’s URL into the TikTok block, and click on the ‘Embed’ button.
When you’re happy with how the template looks, click on the ‘Save’ button. Now, simply visit your WordPress website to see the TikTok in action.
If you just want to add a few TikToks to your WordPress website, then method 1 and method 2 are both great choices. However, sometimes you may want to show all your latest TikToks in a feed that updates automatically.
This is an easy way to keep your website fresh and interesting, while promoting your newest TikTok videos at the very same time.
The best way to embed a TikTok feed in WordPress is by using QuadLayers TikTok Feed. This free plugin allows you to connect WordPress to your TikTok account, and then show all your videos in a gallery or masonry layout.
Just be aware that you can only show TikToks from your own account.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
The first step is creating an access token using your TikTok account. In the WordPress dashboard, head over to TikTok Feed » Accounts and click on ‘Add TikTok Account.’
Next, click ‘Login with TikTok.’
You can now type in your TikTok email address and password, and follow the onscreen instructions to connect QuadLayers to your TikTok account.
When you’re done, QuadLayers will take you back to the WordPress dashboard automatically.
Now, go to TikTok Feeds » Feeds and click on the ‘+ Feed’ button.
In the popup that appears, open the ‘Account’ dropdown and select your TikTok account.
You can now choose between Gallery and Masonry layouts for the TikTok feed. Masonry shows the videos in portrait mode, while Gallery displays the videos as square thumbnails.
By default, QuadLayers will show the most recent 12 TikToks posted to your account. To show more or fewer videos, simply type a different number into the ‘Limit’ field.
You can also change how many videos QuadLayers shows in each row, by typing into the ‘Columns’ field.
There are some more settings you can configure, but this is all you need to create an eye-catching TikTok feed.
When you’re happy with your settings, click on ‘Save.’
QuadLayers will now create a shortcode that adds the feed to your website.
Simply go ahead and copy the value in the ‘Shortcode’ column.
Now, just paste this shortcode into any page, page, or widget-ready area. For step-by-step instructions on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.
With that done, simply visit your website to see the TikTok feed in action.
We hope this article helped you learn how to embed TikTok videos in WordPress. You may also want to check out our guide on how to embed a Facebook video in WordPress, or see our expert pick of the best social media plugins.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Embed TikTok Videos in WordPress (3 Easy Methods) first appeared on WPBeginner.
Do you want to learn how to select and use nested blocks in WordPress?
The WordPress Gutenberg nested blocks feature allows you to add multiple blocks within a parent block. Then, you can customize different block elements at the same time, organize post content efficiently, and access more design flexibility.
In this article, we will show you how to easily select and use WordPress nested blocks.
The WordPress Gutenberg nested block feature allows you to insert (or ‘nest’) one or more blocks within another block.
Nested blocks help you create more complex layouts on your WordPress website by adding multiple blocks inside each other. This allows for more flexibility when designing and formatting content for pages and posts.
For instance, you can nest multiple Image blocks within a Group block to display a set of photos from a particular event or a series of artworks created using a particular technique.
Moreover, the nested block feature allows you to edit individual blocks separately. This means that you can customize each block according to your needs without affecting the other blocks. In turn, this results in better content organization, makes your content more attractive, and streamlines your content creation process.
That being said, let’s see how you can easily select and use WordPress Gutenberg nested blocks.
You can easily nest multiple blocks together using the Group or Columns block in the Gutenberg block editor.
First, you need to open up an existing or new post in the block editor from the WordPress admin sidebar.
From here, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Group’ block. Upon clicking it and adding it to the page, you will need to select a layout for the blocks that you will nest together.
For this tutorial, we will be selecting the ‘Group’ layout.
Next, simply click on the ‘+’ button on the screen to start adding content within the parent block.
For the sake of this tutorial, we will be adding an Image block.
Upon adding the Image block, just click the ‘Group’ button in the block toolbar at the top to select the parent block.
Next, you need to click the ‘+’ button to open up the block menu, from where you can choose other blocks to add.
Once you have nested multiple blocks, you can configure their individual settings by clicking on each block. This will open up the block settings in the right column on the screen.
From here, you can adjust the background color, text color, and size of the individual blocks without affecting the other blocks that are nested within it.
To configure the settings of all the nested blocks together, you will have to click the ‘Group’ button in the block toolbar at the top. This will open up the parent block settings in the right column.
You can now configure the justification, orientation, background color, text color, and typography of all the nested blocks.
Keep in mind that these settings will affect all the blocks nested within the parent block.
You can also convert an existing individual block into nested blocks by clicking the ‘Options’ button in the top toolbar of any block.
This will open up a menu prompt, where you need to select the ‘Create Reusable block’ option.
Once you have done that, a new reusable block will be created where you can add multiple blocks.
After you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to save your changes.
In our example, we have nested a Title, Image, and Paragraph block within a Group block. This is how the nested blocks looked on our demo website.
Sometimes, it can be difficult to select an individual block and configure it when there are multiple blocks nested together.
Luckily, the Wayfinder plugin makes it super easy to select nested blocks from a parent block and even tells you the type and class of the blocks.
First, you will need to install and activate the Wayfinder plugin. For more instructions, you may want to see our guide on how to install a WordPress plugin.
Upon activation, head over to the Settings » Wayfinder page from the WordPress admin sidebar.
Once you are there, all the settings will already be activated. You simply need to uncheck the box next to the settings that you don’t want to use.
For example, if you want Wayfinder to display block types for all the blocks in the editor, then keep the box checked next to the ‘Display block type’ option.
However, if you don’t want the plugin to display block classes, simply uncheck the box next to that option.
After configuring the settings, don’t forget to click the ‘Save Changes’ button.
Next, you need to open up an existing or new post from the WordPress admin sidebar.
Once you are there, hovering your mouse over any block will show an outline with its name. You will also be able to see the outline and name of any nested blocks within the parent block.
This will help you identify all the different blocks that are nested within a Group or Columns block.
From here, you can easily select an individual block from the parent block to configure its settings.
You can also select all the nested blocks at the same time by simply clicking on the ‘Columns’ or ‘Group’ heading. This will open up the parent block settings in the right column.
Once you have configured the block settings, simply click the ‘Update’ or ‘Publish’ button to save your changes.
We hope this article helped you learn how to select and use WordPress nested blocks. You may also want to see our tutorial on how to change block height and width in WordPress and our top picks for the must-have WordPress plugins to help grow your site.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Select and Use Nested Blocks in WordPress first appeared on WPBeginner.
How did WPMU DEV compare against other WordPress leaders in the areas of Managed Hosting, Web Hosting, and WordPress Site Management for the Spring 2023 quarter?
WordPress Site Management
Europe Managed Hosting
Web Hosting
Managed Hosting
WordPress Site Management
Web Hosting
Managed Hosting
WordPress Site Management
WordPress Site Management
WordPress Site Management
Managed Hosting
Managed Hosting
Web Hosting
WordPress Site Management
Europe Web Hosting
WordPress Site Management
Managed Hosting
Asia Pacific Web Hosting
Managed Hosting
Web Hosting
Managed Hosting
Web Hosting
Web Hosting
Web Hosting
WordPress Site Management
Web Hosting
WordPress Site Management
Web Hosting
WordPress Site Management
Web Hosting
Web Hosting
Managed HostingNot sure why G2 awards matter? Then check out this post: Why G2 Are Kind Of a Big Deal for Web Developers
Here are the results of the G2 Spring 2023 Awards, backed by authentic and verified feedback from G2 users.
WPMU DEV, along with Kinsta, tops 3 of the 5 G2 user satisfaction categories shown above, including an amazing 99% for Quality of Support, which we’re pretty chuffed about.
WPMU DEV and Kinsta each ranked highest for the various G2 user satisfaction categories shown above. Notably, WPMU DEV topped Quality of Support here with another 99%Â score.
WPMU DEV is the clear winner in all of G2’s WordPress Site Management categories shown above. Not much more to say, other than to brush the non-existent dust off our shoulders.
We take our members’ feedback and suggestions seriously and we provide 24×7 expert support to deal with any issues you may experience.
If you are unhappy with any aspect of our services or have suggestions for improvement, please tell us. And if you are delighted, please leave a review.
To see how our performance stacks up against other WordPress leaders, go here: How We Compare
To see what new and exciting WPMU DEV developments are coming up next, check out our roadmap.
Not a WPMU DEV member yet? Then experience our award-winning services and become a member today…it’s 100% risk-free!
Did you know you can add a verified logo to your outgoing business emails? This is similar to a social checkmark and verifies that your emails are genuine.
Spam and phishing attacks are common, and many users are concerned about being scammed. Displaying a verified logo can give your customers and readers peace of mind, resulting in them opening more of your emails.
In this article, we will show you how to add a verified logo to your business email.
Email is an important part of any business, especially one you are running from a WordPress website. You want to make sure that your emails are delivered and actually read by your users and customers.
The problem is that your users will receive many emails each day from spammers and scammers. They may wonder if your emails are safe and avoid clicking on them.
You need a way to give them peace of mind. Wouldn’t it be good if there was a way to show readers and customers that your emails were actually sent by your business?
That’s where verified logos come in.
BIMI is a new email standard that stands for ‘Brand Indicators for Message Identification’. It verifies that emails are actually from the business claiming to send them. Your brand logo will be displayed next to genuine email messages to let your customers know that they are safe.
The location and appearance of your brand logo will depend on the email client being used, and some email providers still don’t display a verified logo at all. However, the BIMI standard is being supported by more and more email clients, especially on mobile devices.
However, getting a verified logo set up is complex. Like a jigsaw puzzle, there are a lot of steps that need to be completed, and it’s going to take some time.
This article will take you through the process step by step. Keep in mind that some of the steps are quite technical, and you might like to reach out to an IT or legal professional for help.
With that being said, let’s take a look at how to add a verified logo to your business email. Here are the steps we will cover:
Are you still using a generic Yahoo, Gmail, or Hotmail email address for your business? Customers often don’t trust emails coming from a generic email account.
A custom domain email address looks more professional and gives credibility to your business. Make sure you get one that uses the same domain as your website.
For example, if your website’s address is miamiflorist.com, then your email address should look like john@miamiflorist.com.
If you don’t already have a business email address that uses your website’s domain, then you can set one up in five minutes using our guide on how to create a free business email address.
Or, if you prefer using the Google or Microsoft email web app, then see our guides on how to set up a professional address with Gmail and Google Workspace or Outlook (Office365).
Once you have a new email address, you may need to change the mail exchange (MX) records on your website. MX records tell internet servers where to send emails to and from your website’s domain name.
You will need to find the details of your new MX records from your email provider and then follow our guide on how to change MX records for your WordPress site.
Then finally, you may wish to use your new email address to receive notification emails from WordPress. To do that, simply follow our guide on how to change the WordPress admin email.
Now that you have a custom email address using your domain name, you can set up DMARC (Domain-based Message Authentication, Reporting, and Conformance) for your domain.
This allows email servers to tell the difference between your genuine email messages and fake emails from scammers using your address. It protects your users and customers against phishing attacks and also prevents your emails from being marked as spam.
Tip: If you are not sure whether your domain is already using DMARC, you can check using a checker like MXToolbox. This is important since you should only have one DMARC record.
BIMI requires email messages to be authenticated by DMARC before a verified business logo is displayed on your emails. This will make sure that the logo is only displayed on emails that actually come from you.
Then, all suspicious emails are either rejected or quarantined.
You set up DMARC by adding a new DNS record to your domain. The code that you will add depends on the needs of your business, and you can learn more on the DMARC website.
If you want email servers to reject all suspicious emails, the DNS record will look like this:
v=DMARC1; p=reject; pct=100; rua=mailto:john@miamiflorist.com
Or, if you want suspicious emails to be quarantined, the code will be similar to this:
v=DMARC1; p=quarantine; pct=100; rua=mailto:john@miamiflorist.com
Depending on your needs, the DNS record may contain some additional code.
Just make sure to change the return email address to your own business address. This address will be used to send you DMARC reports about scam emails that have been rejected or quarantined.
The exact method you use to add the DNS record will depend on the domain name registrar you are using. If you are using Bluehost, then you will need to log in and click on ‘Domains’.
This will list your domain names. Once you find the correct one, you should click the down arrow next to the ‘Manage’ button and select ‘DNS’ from the dropdown menu.
On the next page, you need to scroll down to the TXT section and click the ‘Add Record’ button to add a new TXT record to your DNS settings.
Now you can add the DMARC record.
In the Host Record field, you should type ‘_dmarc’. Then, you can paste the DMARC code you chose above into the TXT Value field. You can leave the TTL setting with the default value.
Once you click the ‘Save’ button, your DNS settings will be updated. However, as with any DNS change, you will need to wait up to 48 hours for the new setting to take effect.
You can think of a logo as the profile picture for your business. It helps your customers identify and associate your business with a visual identity. You will be using the logo on your website, social media accounts, email newsletter, and business cards.
If you don’t already have a brand logo for your business, then the first step is to create one, purchase one, or hire someone to make one for you.
For BIMI, this will need to be in the Scalable Vector Graphics (SVG) format. This is a vector image format that will make sure that your logo looks good in any display size.
Creating a Business Logo
You can create a logo yourself using web design software or a free logo maker.
Just make sure that the app can save your logo in the SVG format, such as Adobe Illustrator, Affinity Designer, Inkscape, or Sketch.
Your BIMI email logo should also follow these guidelines to be compatible with different email services:
Hiring a Professional Graphic Designer to Create a Logo
If you are not a graphic designer, then you might find it difficult to create a logo that looks good. Instead, you can hire a professional designer to create your business logo.
To learn some of the best places to get a custom WordPress logo within your budget, see our guide on the best places to get a custom logo.
Make sure you let the designer know that you need an SVG image that complies with BIMI’s general guidelines, as listed above.
Making Your Logo BIMI Compliant
The BIMI Group now requires your SVG logo to be in a specific format called SVG P/S (SVG Tiny Portable/Secure). However, this format is very new, and there are currently no graphics tools that can save in this format.
That means you must change the logo file to make it BIMI-compliant. You can do that using code by following directions on the official BIMI website.
Alternatively, you can use an SVG conversion tool that can modify the file for you.
The next step is to trademark your logo. This is required because BIMI uses Verified Mark Certificates (VMC) to verify brand logo ownership. A VMC is currently only available for logos that are registered trademarks.
This will make sure that no one else can use your trademark as a verified logo, which will protect your users from scammers.
Note: To check if your business already has a trademarked logo, you can search the Brand Database run by World Intellectual Property Organization (WIPO) to find it.
Your brand logo will need to be registered as a trademark with an intellectual property office recognized by VMC issuers. They currently include:
Filing a trademark application is a legal process that needs to be handled carefully. It may take some time, so make sure you get started as soon as possible.
We recommend hiring a lawyer to help you apply for the trademark. You can also use online legal service providers like CorpNet, which provides legal services to small businesses and individuals at a low cost.
Learn more in our guide on how to trademark and copyright your blog’s name and logo.
Now you need to upload your business logo to the website with the same domain as your email address.
For example, if your email address is john@miamiflorist.com, then you need to upload it to the website at miamiflorist.com.
Uploading the Logo File to Your Media Library
Many users will find it simpler to upload the logo file to the WordPress media library.
However, because SVG images contain code, WordPress does not allow you to upload them by default. This is to protect your site in case you got the file from an unreliable source.
You will need to follow our guide on how to add SVG image files in WordPress. We cover several methods, but the easiest is using a snippet from the WPCode pre-made library.
After that, you should navigate to Media » Library.
You can upload your logo using drag and drop or by clicking the ‘Add New’ button at the top of the screen.
Once the image has been uploaded, you need to click it to open your logo’s attachment page.
Here, you will find a button where you can copy the logo’s URL to the clipboard. You should keep a copy of this in a safe place because you will need the URL later in this tutorial.
Uploading the Logo File Using FTP
If you are a more advanced user, then you can use FTP to upload the file to your website.
After that, you need to right-click the file and copy the logo’s URL to the clipboard. You should paste this in a safe place because you will need it later in this tutorial.
The next step is to apply for a VMC (Verified Mark Certificate). It verifies that your organization is the legal owner of your brand logo.
To do this, you will need to contact a BIMI-qualified certification authority. At this time, there are only two: DigiCert and Entrust Datacard.
The application process will require you to submit the SVG file of your brand logo that you created earlier.
When your VMC application is approved, the certification authority will send you an entity certificate Privacy Enhanced Mail (PEM) file.
You need to upload this file to your website using FTP.
After that, you need to copy the file’s URL to the clipboard and store it in a safe place with the logo’s URL that you copied earlier. You will need both of these URLs in the next step.
Note: Your PEM file will need to have a URL starting with ‘https’. See our beginner’s guide on how to properly move WordPress from HTTP to HTTPS for details.
Congratulations! You have now put all the pieces in place to turn on Brand Indicators for Message Identification (BIMI) for your domain. That’s what you will do next.
To turn on BIMI, you will need to add another TXT record to your DNS settings, just like when you set up the DMARC record earlier.
The record will include the URLs to your logo and VMC certificate like this:
v=BIMI1; l=https://URLTOLOGO/logo.svg; a=https://URLTOCERTIFICATE/vmc.pem
Make sure you replace the logo and certificate URLs with the URLs you saved earlier.
Alternatively, you can generate the code you need using the official BIMI Generator Tool.
You need to navigate back to the DNS settings for your domain as you did in Step 2 of this tutorial. Then you should add a new TXT record like this:
The Host Record field needs to be ‘default_.bimi’ followed by a period and your domain name, such as default_.bimi.example.com.
In the Text Value field, you should paste the code you generated above. You can leave the TTL field with the default value.
After that, you will need to click the ‘Save’ button. It may take up to 48 hours for the new record to propagate around the internet.
Now your users will see a verified logo next to your business emails. Well done!
After all the work you just did to create a verified logo for your business emails, it’s a good idea to make sure everything is working properly.
The best way to do that is to visit the official BIMI LookUp & Generator Tool. Simply type in your domain name to get a report that checks your compliance with BIMI standards.
The report will show you whether your DMARC record is according to BIMI specifications. It will also show the contents of your BIMI DNS record, a preview of your verified logo, and whether your VMC certificate is BIMI-compliant.
If any problems are found, then the report will give you more details on what is wrong and how you can fix it.
We hope this tutorial helped you learn how to add a verified logo to your business email. You may also want to see our guide on the right way to create an email newsletter or our expert picks for the best email marketing services for small business.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Add a Verified Logo to Your Business Email (Step by Step) first appeared on WPBeginner.
When it comes to building websites on WordPress, page builders have become an essential tool for many web designers and developers. Among the numerous WordPress page builders available, WPBakery and Elementor are two popular choices that offer a wide range of features and customization options. In this article, we will compare WPBakery and Elementor in […]
The post WPBakery vs Elementor: Which Builder is Better? appeared first on WPExplorer.