{"id":53022,"date":"2018-02-27T18:02:20","date_gmt":"2018-02-27T18:02:20","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=53022"},"modified":"2019-04-02T20:45:59","modified_gmt":"2019-04-02T20:45:59","slug":"wifimanager-with-esp8266-autoconnect-custom-parameter-and-manage-your-ssid-and-password","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/wifimanager-with-esp8266-autoconnect-custom-parameter-and-manage-your-ssid-and-password\/","title":{"rendered":"WiFiManager with ESP8266 &#8211; Autoconnect, Custom Parameter and Manage your SSID and Password"},"content":{"rendered":"<p>In this guide you&#8217;ll learn how to use WiFiManager with the ESP8266 board. WiFiManager allows you to connect your ESP8266 to different Access Points (AP) without having to hard-code and upload new code to your board. <!--more-->Additionally, you can also add custom parameters (variables) and manage multiple SSID connections with the WiFiManager library.<\/p>\n<p><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-53055\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/Wi-fi-manager-thumbnail.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1200\" height=\"675\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/Wi-fi-manager-thumbnail.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/Wi-fi-manager-thumbnail.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/Wi-fi-manager-thumbnail.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/Wi-fi-manager-thumbnail.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2>How WiFiManager Works with ESP8266<\/h2>\n<p>The WiFiManager is a great library do add to your ESP8266 projects, because using this library you no longer have to hard-code your network credentials (SSID and password). Your ESP will automatically join a known network or set up an Access Point that you can use to configure the network credentials. Here&#8217;s how this process works:<\/p>\n<ul>\n<li>When your ESP8266 boots, it is set up in Station mode, and tries to connect to a previously saved Access Point (a known SSID and password combination);<\/li>\n<li>If this process fails, it sets the ESP into Access Point mode;<\/li>\n<li>Using any Wi-Fi enabled device with a browser, connect to the newly created Access Point (default name AutoConnectAP);<\/li>\n<li>After establishing a connection with the AutoConnectAP, you can go to the default IP address 192.168.4.1 to open a web page that allows you to configure your SSID and password;<\/li>\n<li>Once a new SSID and password is set, the ESP reboots and tries to connect;<\/li>\n<li>If it establishes a connection, the process is completed successfully. Otherwise, it will be set up as an Access Point.<\/li>\n<\/ul>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-53059\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ESP8266-wifimanager-configure-ssid-password.jpg?resize=600%2C464&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"464\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ESP8266-wifimanager-configure-ssid-password.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ESP8266-wifimanager-configure-ssid-password.jpg?resize=300%2C232&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>This blog post illustrates two different use cases for the WiFiManager library:<\/p>\n<ul>\n<li>Example #1 &#8211; Autoconnect: Web Server Example<\/li>\n<li>Example #2&nbsp;&#8211; Adding Custom Parameters<\/li>\n<\/ul>\n<h2>Prerequisites<\/h2>\n<p>Before proceeding with this tutorial we recommend reading the following resources:<\/p>\n<ul>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-esp8266-wifi-transceiver-review\/\">Getting Started Guide for the ESP8266 WiFi Module<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-esp8266-board-arduino-ide\/\">How to Install the ESP8266 Board in Arduino IDE<\/a><\/li>\n<\/ul>\n<h4>Installing WiFiManager and ArduinoJSON<\/h4>\n<p>You also need to install the <a href=\"https:\/\/github.com\/tzapu\/WiFiManager\" target=\"_blank\" rel=\"noopener noreferrer\">WiFiManager<\/a> Library and <a href=\"https:\/\/github.com\/bblanchon\/ArduinoJson\" target=\"_blank\" rel=\"noopener noreferrer\">ArduinoJSON<\/a> Library. Follow these next instructions.<\/p>\n<p><strong>Installing the WiFiManager Library<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/tzapu\/WiFiManager\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to download the WiFiManager library<\/a>. You should have a .zip folder in your Downloads<\/li>\n<li>Unzip the&nbsp;<em>.zip<\/em>&nbsp;folder and you should get <strong>WiFiManager-master&nbsp;<\/strong>folder<\/li>\n<li>Rename your folder from&nbsp;<del><strong>WiFiManager-master<\/strong><\/del>&nbsp;to<strong> WiFiManager <\/strong><\/li>\n<li>Move the WiFiManager folder to your Arduino IDE installation&nbsp;<strong>libraries&nbsp;<\/strong>folder<\/li>\n<li>Finally, re-open your Arduino IDE<\/li>\n<\/ol>\n<p><strong>Installing the ArduinoJSON Library<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/bblanchon\/ArduinoJson\/archive\/v5.13.5.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to download the ArduinoJSON library<\/a>. You should have a .zip folder in your Downloads<\/li>\n<li>Unzip the&nbsp;<em>.zip<\/em>&nbsp;folder and you should get <strong>ArduinoJSON-master&nbsp;<\/strong>folder<\/li>\n<li>Rename your folder from&nbsp;<del><strong>ArduinoJSON-master<\/strong><\/del>&nbsp;to <strong>ArduinoJSON<\/strong><\/li>\n<li>Move the ArduinoJSON folder to your Arduino IDE installation&nbsp;<strong>libraries&nbsp;<\/strong>folder<\/li>\n<li>Finally, re-open your Arduino IDE<\/li>\n<\/ol>\n<p>Learn more how to&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/decoding-and-encoding-json-with-arduino-or-esp8266\/\">Decode and Encode JSON with Arduino or ESP8266 using the Arduino JSON Library<\/a>.<\/p>\n<hr>\n<h2>Example #1 &#8211; WiFiManager with ESP8266: Autoconnect Example<\/h2>\n<p>This first example is based on the <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\">ESP8266 Web Server post<\/a>, where you build a web server with an ESP8266 to control two outputs (watch the video tutorial below).<\/p>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/dWM4p_KaTHY?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>For Example #1 we&#8217;ll use the previous project, but instead of hard-coding the SSID and password, you&#8217;ll be able to configure it with the WiFiManager library.<\/p>\n<h3>Code<\/h3>\n<p>Having the ESP8266 add-on for the Arduino IDE installed (<a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-esp8266-board-arduino-ide\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Install the ESP8266 Board in Arduino IDE<\/a>), go to Tools and select \u201cESP-12E\u201d (or choose the development board that you&#8217;re using). Here&#8217;s the code that you need to upload to your ESP8266:<\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;DNSServer.h&gt;\n#include &lt;ESP8266WebServer.h&gt;\n#include &lt;WiFiManager.h&gt;         \/\/ https:\/\/github.com\/tzapu\/WiFiManager\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Variable to store the HTTP request\nString header;\n\n\/\/ Auxiliar variables to store the current output state\nString output5State = &quot;off&quot;;\nString output4State = &quot;off&quot;;\n\n\/\/ Assign output variables to GPIO pins\nconst int output5 = 5;\nconst int output4 = 4;\n\nvoid setup() {\n  Serial.begin(115200);\n  \n  \/\/ Initialize the output variables as outputs\n  pinMode(output5, OUTPUT);\n  pinMode(output4, OUTPUT);\n  \/\/ Set outputs to LOW\n  digitalWrite(output5, LOW);\n  digitalWrite(output4, LOW);\n\n  \/\/ WiFiManager\n  \/\/ Local intialization. Once its business is done, there is no need to keep it around\n  WiFiManager wifiManager;\n  \n  \/\/ Uncomment and run it once, if you want to erase all the stored information\n  \/\/wifiManager.resetSettings();\n  \n  \/\/ set custom ip for portal\n  \/\/wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));\n\n  \/\/ fetches ssid and pass from eeprom and tries to connect\n  \/\/ if it does not connect it starts an access point with the specified name\n  \/\/ here  &quot;AutoConnectAP&quot;\n  \/\/ and goes into a blocking loop awaiting configuration\n  wifiManager.autoConnect(&quot;AutoConnectAP&quot;);\n  \/\/ or use this for auto generated name ESP + ChipID\n  \/\/wifiManager.autoConnect();\n  \n  \/\/ if you get here you have connected to the WiFi\n  Serial.println(&quot;Connected.&quot;);\n  \n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    while (client.connected()) {            \/\/ loop while the client's connected\n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n            \n            \/\/ turns the GPIOs on and off\n            if (header.indexOf(&quot;GET \/5\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 5 on&quot;);\n              output5State = &quot;on&quot;;\n              digitalWrite(output5, HIGH);\n            } else if (header.indexOf(&quot;GET \/5\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 5 off&quot;);\n              output5State = &quot;off&quot;;\n              digitalWrite(output5, LOW);\n            } else if (header.indexOf(&quot;GET \/4\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 4 on&quot;);\n              output4State = &quot;on&quot;;\n              digitalWrite(output4, HIGH);\n            } else if (header.indexOf(&quot;GET \/4\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 4 off&quot;);\n              output4State = &quot;off&quot;;\n              digitalWrite(output4, LOW);\n            }\n            \n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            \/\/ CSS to style the on\/off buttons \n            \/\/ Feel free to change the background-color and font-size attributes to fit your preferences\n            client.println(&quot;&lt;style&gt;html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}&quot;);\n            client.println(&quot;.button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;&quot;);\n            client.println(&quot;text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}&quot;);\n            client.println(&quot;.button2 {background-color: #77878A;}&lt;\/style&gt;&lt;\/head&gt;&quot;);\n            \n            \/\/ Web Page Heading\n            client.println(&quot;&lt;body&gt;&lt;h1&gt;ESP8266 Web Server&lt;\/h1&gt;&quot;);\n            \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 5  \n            client.println(&quot;&lt;p&gt;GPIO 5 - State &quot; + output5State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output5State is off, it displays the ON button       \n            if (output5State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/5\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/5\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } \n               \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 4  \n            client.println(&quot;&lt;p&gt;GPIO 4 - State &quot; + output4State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output4State is off, it displays the ON button       \n            if (output4State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/4\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/4\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            }\n            client.println(&quot;&lt;\/body&gt;&lt;\/html&gt;&quot;);\n            \n            \/\/ The HTTP response ends with another blank line\n            client.println();\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/WiFiManager\/ESP8266_Web_Server_WiFiManager.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<p>This code needs to include the following libraries for the WiFiManager:<\/p>\n<pre><strong>#include &lt;DNSServer.h&gt;\n#include &lt;ESP8266WebServer.h&gt;\n#include &lt;WiFiManager.h&gt;<\/strong><\/pre>\n<p>You also need to create a <em>WiFiManager<\/em> object:<\/p>\n<pre><strong>WiFiManager wifiManager;<\/strong><\/pre>\n<p>And run the <em>autoConnect()<\/em> method:<\/p>\n<pre><strong>wifiManager.autoConnect(\"AutoConnectAP\");<\/strong><\/pre>\n<p>That&#8217;s it! By adding these new lines of code to your ESP8266 projects, you&#8217;re able to configure Wi-Fi credentials using the WiFiManager.<\/p>\n<h3>Accessing the WiFiManager AP<\/h3>\n<p>If it&#8217;s your first time running the WiFiManager code with your ESP8266 board, you&#8217;ll see the next messages being printed in your Arduino IDE Serial Monitor.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-53032\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-autoconnect-arduino-ide-wifimanager.png?resize=756%2C493&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"756\" height=\"493\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-autoconnect-arduino-ide-wifimanager.png?w=756&amp;quality=100&amp;strip=all&amp;ssl=1 756w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-autoconnect-arduino-ide-wifimanager.png?resize=300%2C196&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/p>\n<p>You can either use your computer\/laptop to connect to the AutoConnectAP Access point:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53047\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/auto-connect-app.png?resize=286%2C500&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"286\" height=\"500\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/auto-connect-app.png?w=286&amp;quality=100&amp;strip=all&amp;ssl=1 286w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/auto-connect-app.png?resize=172%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 172w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/p>\n<p>Then, open your browser and type the following IP address:&nbsp;<strong>192.168.4.1<\/strong>. This loads the next web page, where you can set your Wi-Fi credentials:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53048\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/autoconnect-ap-web-server-wifimanager.png?resize=391%2C473&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"391\" height=\"473\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/autoconnect-ap-web-server-wifimanager.png?w=391&amp;quality=100&amp;strip=all&amp;ssl=1 391w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/autoconnect-ap-web-server-wifimanager.png?resize=248%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 248w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/p>\n<p>Alternatively, you can use your smartphone, activate Wi-Fi and connect to AutoConnectAP as follows:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53033\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-Finding-Autoconnect-Network-ESP8266-wifimanager.jpg?resize=600%2C567&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"567\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-Finding-Autoconnect-Network-ESP8266-wifimanager.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-Finding-Autoconnect-Network-ESP8266-wifimanager.jpg?resize=300%2C284&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>You should see a a window similar to the one shown in the figure below. Then, press the &#8220;<strong>SIGN IN<\/strong>&#8221; button:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53035\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-connecting-to-wifi-manager.jpg?resize=600%2C526&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"526\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-connecting-to-wifi-manager.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-connecting-to-wifi-manager.jpg?resize=300%2C263&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<h3>Configuring the WiFi page<\/h3>\n<p>You&#8217;ll be redirected to a web page at <strong>192.168.4.1<\/strong> that allows you to configure your ESP&#8217;s WiFi credentials. Press the &#8220;<strong>Configure WiFi<\/strong>&#8221; button:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53037\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-configure-wifimanager-web-page.jpg?resize=600%2C573&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"573\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-configure-wifimanager-web-page.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-configure-wifimanager-web-page.jpg?resize=300%2C287&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Choose your desired network by tapping its name and the SSID should be filled instantly (in my case &#8220;MEO-620B4B&#8221;):<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53039\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-Enter-ssid-password-wifi-manager.jpg?resize=600%2C463&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"463\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-Enter-ssid-password-wifi-manager.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-Enter-ssid-password-wifi-manager.jpg?resize=300%2C232&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>After that, type your password and press &#8220;<strong>save<\/strong>&#8220;:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53043\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-save-ssid-password-wifimanager-esp8266.jpg?resize=600%2C464&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"464\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-save-ssid-password-wifimanager-esp8266.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-save-ssid-password-wifimanager-esp8266.jpg?resize=300%2C232&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>You&#8217;ll see a similar message saying &#8220;<strong>Credentials Saved<\/strong>&#8220;:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53045\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/6-saved-data-wifimanager-esp8266.jpg?resize=600%2C249&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"249\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/6-saved-data-wifimanager-esp8266.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/6-saved-data-wifimanager-esp8266.jpg?resize=300%2C125&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>In the meanwhile, the&nbsp;<strong>Serial Monitor<\/strong>&nbsp;displays the scan results of the available Access Points and message stating that Wi-Fi credentials were saved.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53034\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-autoconnect-arduino-ide-wifimanager.png?resize=756%2C531&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"756\" height=\"531\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-autoconnect-arduino-ide-wifimanager.png?w=756&amp;quality=100&amp;strip=all&amp;ssl=1 756w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-autoconnect-arduino-ide-wifimanager.png?resize=300%2C211&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/p>\n<h3>Accessing your web server<\/h3>\n<p>Now, if you&nbsp;<strong>RESET<\/strong> your ESP board, it will print the IP address in the Serial Monitor (in my case it&#8217;s <strong>192.168.1.132<\/strong>):<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53036\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-autoconnect-arduino-ide-wifimanager.png?resize=756%2C493&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"756\" height=\"493\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-autoconnect-arduino-ide-wifimanager.png?w=756&amp;quality=100&amp;strip=all&amp;ssl=1 756w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-autoconnect-arduino-ide-wifimanager.png?resize=300%2C196&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/p>\n<p>Open your browser and type the IP address. You should see the web server shown below, that allows you to control two GPIOs on and off:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53040\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-ESP8266-web-server-outputs-leds-web-page.png?resize=530%2C411&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"530\" height=\"411\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-ESP8266-web-server-outputs-leds-web-page.png?w=530&amp;quality=100&amp;strip=all&amp;ssl=1 530w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-ESP8266-web-server-outputs-leds-web-page.png?resize=300%2C233&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/p>\n<h3>Parts required and schematic<\/h3>\n<p>If you want to make this project work, here&#8217;s the parts that you need:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 12-E<\/a>&nbsp;\u2013 read&nbsp;<a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best ESP8266 Wi-Fi Development Boards<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x LEDs<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x Resistors<\/a>&nbsp;(220 or 330 ohms should work just fine)<\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">Breadboard<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<p>Follow this schematic:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52689\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=928%2C555&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"928\" height=\"555\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?w=928&amp;quality=100&amp;strip=all&amp;ssl=1 928w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=300%2C179&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=768%2C459&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/p>\n<hr>\n<h2>How to Erase Credentials From Your ESP8266<\/h2>\n<p>This next line is commented by default, otherwise you would need to configure your ESP8266 every time it boots up.<\/p>\n<pre>\/\/ Uncomment and run it once, if you want to erase all the stored information\n<strong>\/\/wifiManager.resetSettings();<\/strong><\/pre>\n<p>If for some reason you want to erase all the saved credentials:<\/p>\n<ol>\n<li>Uncomment the preceding line;<\/li>\n<li>Upload the code to the ESP8266;<\/li>\n<li>Let it run once (reset your board);<\/li>\n<li>Comment that line again;<\/li>\n<li>Upload the code to the ESP8266 with the line commented.<\/li>\n<\/ol>\n<hr>\n<h2>Example #2&nbsp;&#8211; WiFiManager with ESP8266 and Custom Parameters<\/h2>\n<p>The WiFiManager has a useful feature that allows you to add custom parameters to the &#8220;Configure WiFi&#8221; web page. This is extremely useful, because in some applications you might want to add a different API Key, an MQTT broker IP Address, assign a different GPIO, activate a sensor, etc..<\/p>\n<p>In Example #2, you&#8217;ll make a web server to control an ESP8266 GPIO pin that is defined with a custom parameter set through the WiFiManager.<\/p>\n<h3>Code<\/h3>\n<p>Having the ESP8266 add-on for the Arduino IDE installed (<a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-esp8266-board-arduino-ide\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Install the ESP8266 Board in Arduino IDE<\/a>), go to Tools and select \u201cESP-12E\u201d (or choose the development board that you&#8217;re using).&nbsp;Here&#8217;s the code that you need to upload to your ESP8266:<\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;FS.h&gt; \/\/this needs to be first, or it all crashes and burns...\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;DNSServer.h&gt;\n#include &lt;ESP8266WebServer.h&gt;\n#include &lt;WiFiManager.h&gt;          \/\/ https:\/\/github.com\/tzapu\/WiFiManager\n#include &lt;ArduinoJson.h&gt;          \/\/ https:\/\/github.com\/bblanchon\/ArduinoJson\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Variable to store the HTTP request\nString header;\n\n\/\/ Auxiliar variables to store the current output state\nString outputState = &quot;off&quot;;\n\n\/\/ Assign output variables to GPIO pins\nchar output[2] = &quot;5&quot;;\n\n\/\/flag for saving data\nbool shouldSaveConfig = false;\n\n\/\/callback notifying us of the need to save config\nvoid saveConfigCallback () {\n  Serial.println(&quot;Should save config&quot;);\n  shouldSaveConfig = true;\n}\n\nvoid setup() {\n  Serial.begin(115200);\n  \n  \/\/clean FS, for testing\n  \/\/SPIFFS.format();\n\n  \/\/read configuration from FS json\n  Serial.println(&quot;mounting FS...&quot;);\n\n  if (SPIFFS.begin()) {\n    Serial.println(&quot;mounted file system&quot;);\n    if (SPIFFS.exists(&quot;\/config.json&quot;)) {\n      \/\/file exists, reading and loading\n      Serial.println(&quot;reading config file&quot;);\n      File configFile = SPIFFS.open(&quot;\/config.json&quot;, &quot;r&quot;);\n      if (configFile) {\n        Serial.println(&quot;opened config file&quot;);\n        size_t size = configFile.size();\n        \/\/ Allocate a buffer to store contents of the file.\n        std::unique_ptr&lt;char[]&gt; buf(new char[size]);\n\n        configFile.readBytes(buf.get(), size);\n        DynamicJsonBuffer jsonBuffer;\n        JsonObject&amp; json = jsonBuffer.parseObject(buf.get());\n        json.printTo(Serial);\n        if (json.success()) {\n          Serial.println(&quot;\\nparsed json&quot;);\n          strcpy(output, json[&quot;output&quot;]);\n        } else {\n          Serial.println(&quot;failed to load json config&quot;);\n        }\n      }\n    }\n  } else {\n    Serial.println(&quot;failed to mount FS&quot;);\n  }\n  \/\/end read\n  \n  WiFiManagerParameter custom_output(&quot;output&quot;, &quot;output&quot;, output, 2);\n\n  \/\/ WiFiManager\n  \/\/ Local intialization. Once its business is done, there is no need to keep it around\n  WiFiManager wifiManager;\n\n  \/\/set config save notify callback\n  wifiManager.setSaveConfigCallback(saveConfigCallback);\n  \n  \/\/ set custom ip for portal\n  \/\/wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));\n\n  \/\/add all your parameters here\n  wifiManager.addParameter(&amp;custom_output);\n  \n  \/\/ Uncomment and run it once, if you want to erase all the stored information\n  \/\/wifiManager.resetSettings();\n\n  \/\/set minimu quality of signal so it ignores AP's under that quality\n  \/\/defaults to 8%\n  \/\/wifiManager.setMinimumSignalQuality();\n  \n  \/\/sets timeout until configuration portal gets turned off\n  \/\/useful to make it all retry or go to sleep\n  \/\/in seconds\n  \/\/wifiManager.setTimeout(120);\n\n  \/\/ fetches ssid and pass from eeprom and tries to connect\n  \/\/ if it does not connect it starts an access point with the specified name\n  \/\/ here  &quot;AutoConnectAP&quot;\n  \/\/ and goes into a blocking loop awaiting configuration\n  wifiManager.autoConnect(&quot;AutoConnectAP&quot;);\n  \/\/ or use this for auto generated name ESP + ChipID\n  \/\/wifiManager.autoConnect();\n  \n  \/\/ if you get here you have connected to the WiFi\n  Serial.println(&quot;Connected.&quot;);\n  \n  strcpy(output, custom_output.getValue());\n\n  \/\/save the custom parameters to FS\n  if (shouldSaveConfig) {\n    Serial.println(&quot;saving config&quot;);\n    DynamicJsonBuffer jsonBuffer;\n    JsonObject&amp; json = jsonBuffer.createObject();\n    json[&quot;output&quot;] = output;\n\n    File configFile = SPIFFS.open(&quot;\/config.json&quot;, &quot;w&quot;);\n    if (!configFile) {\n      Serial.println(&quot;failed to open config file for writing&quot;);\n    }\n\n    json.printTo(Serial);\n    json.printTo(configFile);\n    configFile.close();\n    \/\/end save\n  }\n\n  \/\/ Initialize the output variables as outputs\n  pinMode(atoi(output), OUTPUT);\n  \/\/ Set outputs to LOW\n  digitalWrite(atoi(output), LOW);;\n  \n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    while (client.connected()) {            \/\/ loop while the client's connected\n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n            \n            \/\/ turns the GPIOs on and off\n            if (header.indexOf(&quot;GET \/output\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;Output on&quot;);\n              outputState = &quot;on&quot;;\n              digitalWrite(atoi(output), HIGH);\n            } else if (header.indexOf(&quot;GET \/output\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;Output off&quot;);\n              outputState = &quot;off&quot;;\n              digitalWrite(atoi(output), LOW);\n            }\n            \n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            \/\/ CSS to style the on\/off buttons \n            \/\/ Feel free to change the background-color and font-size attributes to fit your preferences\n            client.println(&quot;&lt;style&gt;html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}&quot;);\n            client.println(&quot;.button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;&quot;);\n            client.println(&quot;text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}&quot;);\n            client.println(&quot;.button2 {background-color: #77878A;}&lt;\/style&gt;&lt;\/head&gt;&quot;);\n            \n            \/\/ Web Page Heading\n            client.println(&quot;&lt;body&gt;&lt;h1&gt;ESP8266 Web Server&lt;\/h1&gt;&quot;);\n            \n            \/\/ Display current state, and ON\/OFF buttons for the defined GPIO  \n            client.println(&quot;&lt;p&gt;Output - State &quot; + outputState + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the outputState is off, it displays the ON button       \n            if (outputState==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/output\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/output\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            }                  \n            client.println(&quot;&lt;\/body&gt;&lt;\/html&gt;&quot;);\n            \n            \/\/ The HTTP response ends with another blank line\n            client.println();\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/WiFiManager\/ESP8266_Web_Server_WiFiManager_Custom_Parameter.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<h3>Adding custom parameters<\/h3>\n<p>To add a custom parameter, you need to add a bunch of code (see the preceding sketch) that allows you to manipulate the <strong>\/config.json<\/strong> file stored in the ESP. For this tutorial we won&#8217;t explain how the custom parameters feature works, but basically if you wanted to create another custom parameter follow these next steps.<\/p>\n<p>In this example, we&#8217;ll create a variable to store an&nbsp;MQTT broker server IP address. First, create a <em>char<\/em> variable:<\/p>\n<pre>char output[2];\n<strong>char mqtt_server[40];<\/strong><\/pre>\n<p>Then, if it&#8217;s already saved in the <strong>\/config.json<\/strong>, you can copy it:<\/p>\n<pre>strcpy(output, json[\"output\"]);\n<strong>strcpy(mqtt_server, json[\"mqtt_server\"]);<\/strong><\/pre>\n<p>Create a WiFiManagerParameter (so, the parameter is displayed in the &#8220;Configure WiFi&#8221; web page:<\/p>\n<pre>WiFiManagerParameter custom_output(\"output\", \"output\", output, 2);\n<strong>WiFiManagerParameter custom_mqtt_server(\"server\", \"mqtt server\", mqtt_server, 40);<\/strong><\/pre>\n<p>Add the variable as a parameter:<\/p>\n<pre>wifiManager.addParameter(&amp;custom_output);\n<strong>wifiManager.addParameter(&amp;custom_mqtt_server);<\/strong><\/pre>\n<p>Check and update the char variables with the latest value:<\/p>\n<pre>strcpy(output, custom_output.getValue());\n<strong>strcpy(mqtt_server, custom_mqtt_server.getValue());<\/strong><\/pre>\n<p>Finally, if the user submits a new value to one of the parameters, this line updates the<strong> \/config.json<\/strong> file:<\/p>\n<pre>json[\"output\"] = output;\n<strong>json[\"mqtt_server\"] = mqtt_server;<\/strong><\/pre>\n<p>You could repeat this process to add more custom parameters.<\/p>\n<h3>Accessing the WiFiManager AP<\/h3>\n<p>Use your smartphone, computer or tablet and connect to the AutoConnectAP Access Point:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53033\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-Finding-Autoconnect-Network-ESP8266-wifimanager.jpg?resize=600%2C567&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"567\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-Finding-Autoconnect-Network-ESP8266-wifimanager.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/1-Finding-Autoconnect-Network-ESP8266-wifimanager.jpg?resize=300%2C284&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>You should see a a window similar to the one shown in the figure below. Then, press the &#8220;<strong>SIGN IN<\/strong>&#8221; button:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53035\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-connecting-to-wifi-manager.jpg?resize=600%2C526&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"526\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-connecting-to-wifi-manager.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/2-connecting-to-wifi-manager.jpg?resize=300%2C263&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<h3>Configuring the WiFi page<\/h3>\n<p>You&#8217;ll be redirected to a web page at <strong>192.168.4.1<\/strong> that allows you to configure your ESP&#8217;s WiFi credentials. Press the &#8220;<strong>Configure WiFi<\/strong>&#8221; button:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53037\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-configure-wifimanager-web-page.jpg?resize=600%2C573&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"573\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-configure-wifimanager-web-page.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/3-configure-wifimanager-web-page.jpg?resize=300%2C287&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Choose your desired network by tapping its name and the SSID should be filled instantly (in my case &#8220;MEO-620B4B&#8221;):<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53038\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-Enter-ssid-password-custom-parameterwifi-manager-esp8266.jpg?resize=600%2C502&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"502\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-Enter-ssid-password-custom-parameterwifi-manager-esp8266.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/4-Enter-ssid-password-custom-parameterwifi-manager-esp8266.jpg?resize=300%2C251&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>After that, type your password, your desired GPIO number (in my case it&#8217;s GPIO 5, so I&#8217;ve entered 5) and press &#8220;<strong>save<\/strong>&#8220;:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53042\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-save-ssid-password-custom-parameter-wifimanager-esp8266.jpg?resize=600%2C484&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"600\" height=\"484\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-save-ssid-password-custom-parameter-wifimanager-esp8266.jpg?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-save-ssid-password-custom-parameter-wifimanager-esp8266.jpg?resize=300%2C242&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>In the meanwhile, the&nbsp;<strong>Serial Monitor<\/strong>&nbsp;displays:<\/p>\n<ul>\n<li>Scan results of the available Access Points;<\/li>\n<li>Message stating that Wi-Fi credentials were saved;<\/li>\n<li>Confirmation that the output parameter (that refers to the GPIO) was set to 5: {&#8220;output&#8221;:&#8221;5&#8243;}.<\/li>\n<\/ul>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53041\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-autoconnect-arduino-ide-wifimanager.png?resize=756%2C576&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"756\" height=\"576\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-autoconnect-arduino-ide-wifimanager.png?w=756&amp;quality=100&amp;strip=all&amp;ssl=1 756w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/5-autoconnect-arduino-ide-wifimanager.png?resize=300%2C229&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/p>\n<h3>Accessing your web server<\/h3>\n<p>Now, if you&nbsp;<strong>RESET<\/strong> your ESP board, it will print the IP address in the Serial Monitor (in my case it&#8217;s <strong>192.168.1.132<\/strong>):<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53044\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/6-autoconnect-arduino-ide-wifimanager.png?resize=756%2C551&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"756\" height=\"551\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/6-autoconnect-arduino-ide-wifimanager.png?w=756&amp;quality=100&amp;strip=all&amp;ssl=1 756w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/6-autoconnect-arduino-ide-wifimanager.png?resize=300%2C219&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/p>\n<p>Open your browser and type the IP address. You should see the web server shown below, that allows you to control the GPIO you&#8217;ve defined on and off:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53029\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/7-ESP8266-web-server-outputs-leds-web-page.png?resize=458%2C287&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"458\" height=\"287\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/7-ESP8266-web-server-outputs-leds-web-page.png?w=458&amp;quality=100&amp;strip=all&amp;ssl=1 458w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/7-ESP8266-web-server-outputs-leds-web-page.png?resize=300%2C188&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 458px) 100vw, 458px\" \/><\/p>\n<h3>Parts required and schematic<\/h3>\n<p>If you want to make this project work, here&#8217;s the parts that you need:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 12-E<\/a>&nbsp;\u2013 read&nbsp;<a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best ESP8266 Wi-Fi Development Boards<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x LED<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Resistor<\/a>&nbsp;(220 or 330 ohms should work just fine)<\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">Breadboard<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<p><strong>Note:<\/strong> if you&#8217;ve defined a GPIO number different than GPIO 5 (which is D1 with the NodeMCU board), you need to make a different circuit.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53030\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics-led-d1.jpg?resize=750%2C496&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"496\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics-led-d1.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics-led-d1.jpg?resize=300%2C198&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2>Wrapping Up<\/h2>\n<p>That&#8217;s it for now, I hope you found this project useful and you can use the WiFiManager library in your projects!<\/p>\n<p>If you like the ESP8266, you may also like:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Automation Using ESP8266<\/a><\/strong><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\">Build an ESP8266 Web Server<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-wi-fi-button-diy-amazon-dash-button-clone\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Wi-Fi Button \u2013 DIY Amazon Dash Button Clone<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-daily-task-publish-temperature-readings-to-thingspeak\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Daily Task \u2013 Publish Temperature Readings to ThingSpeak<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-weather-forecaster\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266 Weather Forecaster<\/a><\/li>\n<\/ul>\n<h4>Do you have any questions?&nbsp;Leave a comment down below!<\/h4>\n<p>Thanks for reading. If you like this post probably you might like my next ones, so please support me by&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/download\/\">subscribing my blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide you&#8217;ll learn how to use WiFiManager with the ESP8266 board. WiFiManager allows you to connect your ESP8266 to different Access Points (AP) without having to hard-code and &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"WiFiManager with ESP8266 &#8211; Autoconnect, Custom Parameter and Manage your SSID and Password\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/wifimanager-with-esp8266-autoconnect-custom-parameter-and-manage-your-ssid-and-password\/#more-53022\" aria-label=\"Read more about WiFiManager with ESP8266 &#8211; Autoconnect, Custom Parameter and Manage your SSID and Password\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":53055,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[214,265,246,300,240,264,257,218],"tags":[],"class_list":["post-53022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266","category-esp8266-project","category-esp8266-arduino-ide","category-0-esp8266","category-esp8266-projects","category-project","category-web-server-2","category-web-server"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/Wi-fi-manager-thumbnail.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/53022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=53022"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/53022\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/53055"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=53022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=53022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=53022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}