{"id":638,"date":"2025-04-22T11:08:23","date_gmt":"2025-04-22T11:08:23","guid":{"rendered":"http:\/\/localhost:8091\/?page_id=638"},"modified":"2025-05-22T05:25:47","modified_gmt":"2025-05-22T05:25:47","slug":"appearance-step","status":"publish","type":"page","link":"https:\/\/www.uxtweak.com\/help\/onsite-widget-recruiting\/appearance-step\/","title":{"rendered":"How to change the looks of your widget in the Appearance step"},"content":{"rendered":"\n<p class=\"text-block\">The Appearance setup step allows you to:<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li>Adjust the widget content.<\/li>\n\n\n\n<li>Choose the position of the widget on your web.<\/li>\n\n\n\n<li>Customize the widget&#8217;s appearance.<\/li>\n<\/ul>\n\n\n<h2 id=\"adjust-the-widget-content\" class=\"heading-block\" tabindex=\"0\">Adjust the widget content<a class=\"copy-link\" title=\"Copy link\" data-id=\"adjust-the-widget-content\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<ul class=\"bullet-list\">\n<li>By default, the widget contains a simple\u00a0<strong>recruiting message<\/strong>\u00a0and a\u00a0<strong>button<\/strong>\u00a0that directs the visitor to your study. You can customize the recruitment message and the label inside the button.<\/li>\n\n\n\n<li>Try to be persuasive. The default message implies that the respondent will receive a reward for participating in the study. You can add promo code rewards in the setup of your study.<\/li>\n<\/ul>\n\n\n<h2 id=\"choose-the-position-of-the-widget-on-your-web\" class=\"heading-block\" tabindex=\"0\">Choose the position of the widget on your web<a class=\"copy-link\" title=\"Copy link\" data-id=\"choose-the-position-of-the-widget-on-your-web\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">You can choose whether the widget will appear on the left or right portion of your page. The position on the right is set up as default since most of the visitors expect pop-ups to appear there. We suggest you choose the left side position only if the widget would cover an important section of your web&#8217;s user interface on the right side.<\/p>\n\n\n<h2 id=\"customize-the-widgets-appearance\" class=\"heading-block\" tabindex=\"0\">Customize the widget&#8217;s appearance<a class=\"copy-link\" title=\"Copy link\" data-id=\"customize-the-widgets-appearance\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\"><strong>If you are on a paid plan<\/strong>, you can change the background color of your widget as well as the text color and the color of the action button. There are several pre-set color options available, but if they don&#8217;t fit your website, simply use the color picker and select any color you want. Paid plan accounts may also hide the UXtweak branding from the widget.<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/04\/image-17.png\" alt=\"Choose how your widget looks\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Choose how your widget looks<\/h4>\n                                                    <p>Use all of the presented options to make the widget fit your website.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    \n\n    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/04\/image2-3.png\" alt=\"Preview the final look\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Preview the final look<\/h4>\n                                                    <p>In the right panel, you can see the final design.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    \n\n    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/04\/image3-3.png\" alt=\"Widget on a website\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Widget on a website<\/h4>\n                                                    <p>See how the widget looks mounted on a website.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Appearance setup step allows you to: You can choose whether the widget will appear on the left or right portion of your page. The position on the right is set up as default since most of the visitors expect pop-ups to appear there. We suggest you choose the left side position only if the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":627,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-638","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/comments?post=638"}],"version-history":[{"count":3,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/638\/revisions"}],"predecessor-version":[{"id":2745,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/638\/revisions\/2745"}],"up":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/627"}],"wp:attachment":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/media?parent=638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/categories?post=638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/tags?post=638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}