{"id":27300,"date":"2021-07-26T15:00:19","date_gmt":"2021-07-26T13:00:19","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=27300"},"modified":"2021-07-26T10:58:28","modified_gmt":"2021-07-26T08:58:28","slug":"how-to-show-twitch-status-and-embed-stream-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-show-twitch-status-and-embed-stream-in-wordpress\/","title":{"rendered":"How to Show Twitch Status and Embed a Stream in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Do you remember when video-gaming was a niche hobby? That can hardly be said to be the case anymore. Gaming is <strong>a massive industry and the mainstream of entertainment<\/strong>, so it\u2019s little wonder that there is a dedicated streaming platform for people interested in gaming and watching other people play and comment on games: Twitch. Twitch streams are accessible online, but there are also ways of integrating them with WordPress and even <strong>embedding Twitch streams into your WordPress website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, if you wish to<strong> provide your visitors with easy access to a particular Twitch stream<\/strong>, you are in the right place. But let us take a step back: why would you want to do that, anyway, and how can you integrate it into your WordPress website? Here\u2019s what we\u2019ll be talking about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-embed-a-twitch-stream\">Why Embed a Twitch Stream?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-show-twitch-status-in-wordpress\">How to Show Twitch Status in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-embed-a-twitch-stream-in-wordpress\">How to Embed a Twitch Stream in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-embed-a-twitch-stream\"><\/a>Why Embed a Twitch Stream?<\/h2>\n<p>[\/vc_column_text][vc_column_text]In most ways, <a href=\"https:\/\/www.twitch.tv\/\" target=\"_blank\" rel=\"noopener\">Twitch<\/a> is an online video streaming service just like any other. What sets it apart is its focus on the <strong>live streaming of video games<\/strong>. It is as much of a social network now as YouTube is, providing viewers worldwide with game streams and other gaming related content. Since its acquisition by Amazon in 2014, Twitch has <strong>grown massively in terms of viewers per month, monthly active users and broadcasters.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Like it or not, Twitch is <strong>the premier channel for video game streamers<\/strong> at the moment. Whether you are in the business of video games or you simply want to showcase a hobby, you can benefit from integrating your WordPress website and Twitch.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As of 2016, Twitch has introduced sales links to streams, allowing streamers to monetize their channels through sales commissions, effectively making it easy to stream games as a business. This also means that there is now <strong>a clear commercial incentive<\/strong> for link-building between WordPress websites and Twitch streams, too.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;gaming-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-show-twitch-status-in-wordpress\"><\/a>How to Show Twitch Status in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Let\u2018s say you want to let your website visitors know when you\u2018re streaming on Twitch. You can do that easily using a plugin. The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/stream-status-for-twitch\/\" target=\"_blank\" rel=\"noopener\">Stream Status for Twitch<\/a>. It is very easy to set up, all you really need is a channel name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After having installed and activated the plugin, find it on the <strong>Plugins<\/strong> screen and click on the <em>Settings<\/em> link.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Stream Status for Twitch Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is where you can customize the plugin\u2019s appearance. In the plugin\u2018s <strong>Main Settings<\/strong>, enter the name of the channel you wish to link to. With that, you are good to go: you should be seeing the widget in the bottom right of the screen. This plugin still allows you some customization options, though.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On this screen, can also check <strong>Hide when offline<\/strong> to show the widget only when the streamer is streaming, check <strong>Open in new window<\/strong> to open the stream in a new window, and change the status text if a stream is live or online.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"596\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Stream Status for Twitch Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-2-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-2-768x472.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-2-620x381.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Positioning<\/strong> options are used to set the position of the floating button. Checking <strong>Absolute positioning<\/strong> will keep the button in its position on the website, while by default it floats regardless of how you scroll. The <strong>Vertical<\/strong> and <strong>Horizontal<\/strong> placement menus allow you to change the positioning of the buttons in general terms, while the <strong>Top\/bottom<\/strong> and <strong>Left\/right distance<\/strong> fields let you fine-tune it in relation to the edge of the screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-3.jpg\" class=\"attachment-full size-full\" alt=\"Stream Status for Twitch Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-3.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-3-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-3-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-3-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Customization<\/strong> settings govern the look of the floating button itself, including the colour options and corner roundness. You can also choose a<strong> Larger design<\/strong> if you want to make your widget larger in or <strong>Disable status text underline<\/strong> on mouse hover.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"640\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-4.jpg\" class=\"attachment-full size-full\" alt=\"Stream Status for Twitch Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-4.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-4-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-4-768x507.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-4-620x409.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, in the <strong>Misc<\/strong> options you can check <strong>Disable appearance animation<\/strong> in case you want a plain floating button, and set screen resolutions for which the widget does not appear.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"568\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-5.jpg\" class=\"attachment-full size-full\" alt=\"Stream Status for Twitch Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-5.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-5-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-5-768x450.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Settings-5-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, your button will appear for all your website visitors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Stream Status for Twitch Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Stream-Status-for-Twitch-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-embed-a-twitch-stream-in-wordpress\"><\/a>How to Embed a Twitch Stream in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you want to embed your Twitch stream, though, you will need to do some extra work and a different plugin. For this, we will be using <a href=\"https:\/\/wordpress.org\/plugins\/tomparisde-twitchtv-widget\/\" target=\"_blank\" rel=\"noopener\">Twitch for WordPress<\/a>. After having installed and activated the plugin, you will still need an API key to make it work. You will need a Twitch account and also to <strong>Set Up Two-Factor Authentication<\/strong> in your Twitch accounts <a href=\"https:\/\/www.twitch.tv\/settings\/security\" target=\"_blank\" rel=\"noopener\">security settings<\/a>. Twitch is very mindful of security, and the exact steps you need to take may vary with regards to email accounts and devices you may be using. Follow the prompts on the screen and you should be fine.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can find the instructions for creating a Twitch API in the plugin\u2018s settings themselves. But don\u2018t worry, we will take you every step of the way once you have set up and configured your account.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Twitch-for-WordPress-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Twitch for WordPress Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Twitch-for-WordPress-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Twitch-for-WordPress-Settings-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Twitch-for-WordPress-Settings-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Twitch-for-WordPress-Settings-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While logged into your Twitch account, go to the <a href=\"https:\/\/dev.twitch.tv\/login\" target=\"_blank\" rel=\"noopener\">Twitch Developers<\/a> site. You will need to <strong>Authorize<\/strong> Twitch Developer to access your account.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"664\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Authorize-Twitch-Developer.jpg\" class=\"attachment-full size-full\" alt=\"Authorize Twitch Developer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Authorize-Twitch-Developer.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Authorize-Twitch-Developer-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Authorize-Twitch-Developer-768x526.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Authorize-Twitch-Developer-620x425.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will then be taken to your account\u2018s console. Find the <strong>Applications<\/strong> tab and click the button on the right-hand side to +<strong>Register Your Application<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Register-Your-Application.jpg\" class=\"attachment-full size-full\" alt=\"Register Your Application\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Register-Your-Application.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Register-Your-Application-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Register-Your-Application-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Register-Your-Application-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You then need to choose a <strong>Name<\/strong> for your application, enter and <strong>Add<\/strong> a valid redirect link for your<strong> OAuth Redirect URL<\/strong> (for the purposes of testing, we have used<em> https:\/\/localhost<\/em>), and select <strong>Website Integration<\/strong> for your application <strong>Category<\/strong>. Check the reCAPTCHA and then click <strong>Create<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"626\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Console-Create.jpg\" class=\"attachment-full size-full\" alt=\"Console Create\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Console-Create.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Console-Create-300x194.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Console-Create-768x496.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Console-Create-620x401.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have created your application, click on the <strong>Manage<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Manage.jpg\" class=\"attachment-full size-full\" alt=\"Manage\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Manage.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Manage-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Manage-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Manage-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we arrive at the two things we need: your <strong>Client ID<\/strong> and your <strong>Client Secret<\/strong>. Click to get your <strong>New Secret<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"608\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/New-Secret.jpg\" class=\"attachment-full size-full\" alt=\"New Secret\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/New-Secret.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/New-Secret-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/New-Secret-768x482.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/New-Secret-620x389.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Paste your <strong>Client ID<\/strong> and your <strong>Client Secret<\/strong> into their fields in the <strong>API Settings<\/strong> sections and hit enter. Your API <strong>Status<\/strong> will change to <em>Connected<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"492\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Paste-ID-and-Secret.jpg\" class=\"attachment-full size-full\" alt=\"Paste ID and Secret\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Paste-ID-and-Secret.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Paste-ID-and-Secret-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Paste-ID-and-Secret-768x390.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Paste-ID-and-Secret-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scrolling down, you will find the plugin\u2018s <strong>General Settings<\/strong>. These include the <strong>Cache Duration<\/strong> setting (for how long does the plugin store temporary files; keep low for best performance), and the <strong>No Streams<\/strong> message settings, governing whether the user sees the message when no streams are available and what the message itself is.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Further down are the <strong>Default Settings<\/strong>, which contain the <strong>Language<\/strong> filter (you have to select a language in which to show streams), as well as <strong>Widget<\/strong> and <strong>Preview Style<\/strong>. The free version of this plugin doesn\u2018t give us a great deal of options here, so we\u2018ll leave all of these settings alone.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"472\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Default-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Default Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Default-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Default-Settings-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Default-Settings-768x374.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Default-Settings-620x302.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Further down, you can review your API data and stream availability, and click <strong>Save Changes<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"668\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Review-and-Save.jpg\" class=\"attachment-full size-full\" alt=\"Review and Save\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Review-and-Save.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Review-and-Save-300x207.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Review-and-Save-768x529.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Review-and-Save-620x427.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, to actually place your stream widget onto your website, you need to navigate to <strong>Appearance\/Widgets<\/strong> on your WordPress dashboard and drag the Twitch Widget to the desired area. Bear in mind that widget area names and positions vary by theme.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Drag-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Drag Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Drag-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Drag-Widget-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Drag-Widget-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Drag-Widget-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have your widget in place, you need to configure it. Your stream may have a <strong>Title<\/strong>, but it\u2019s not compulsory. The free version allows you up to three streams, but we will link just the one. Enter the <strong>Streamers<\/strong> you wish to feature as a comma separated list. The<strong> Output Settings<\/strong> allow you to specify the number of streams which to feature (again, we went with one). The <strong>Template Settings<\/strong> let you choose between the <strong>Style<\/strong> from your settings page or other settings (available in the pro version only), choose the <strong>Size<\/strong> (we went with small, because otherwise the widget would take up the width of the screen), and the <strong>Preview<\/strong>. We went with <em>Image<\/em>, but you can choose a video preview if you like. The <strong>Widget Context<\/strong> menu allows you to choose when the widget is shown. Once you are satisfied with your settings, click <strong>Save<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-1.jpg\" class=\"attachment-full size-full\" alt=\"Widget Config\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-1-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-1-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-1-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"444\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-2.jpg\" class=\"attachment-full size-full\" alt=\"Widget Config\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-2-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-2-768x352.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Widget-Config-2-620x284.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And finally, your stream will be there for your visitors to enjoy.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Live-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Live Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Live-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Live-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Live-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Live-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, making your presence on Twitch known is no big deal, while embedding a stream does take some little effort. Whether you like it or not, Twitch is an indispensable tool for distribution of gaming-related content. If your website is in any way related to games, you can\u2018t afford not to be aware of it.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to embed a Twitch stream into your WordPress website? We will show you how to do that, and more.<\/p>\n","protected":false},"author":16990,"featured_media":27422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[26,123,4,124,13],"class_list":["post-27300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-social","tag-streaming","tag-tips","tag-twitch","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=27300"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/27422"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=27300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=27300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=27300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}