WiFiManager with ESP8266 – Autoconnect, Custom Parameter and Manage your SSID and Password

In this guide you’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. Additionally, you can also add custom parameters (variables) and manage multiple SSID connections with the WiFiManager library.

How WiFiManager Works with ESP8266

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’s how this process works:

  • 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);
  • If this process fails, it sets the ESP into Access Point mode;
  • Using any Wi-Fi enabled device with a browser, connect to the newly created Access Point (default name AutoConnectAP);
  • 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;
  • Once a new SSID and password is set, the ESP reboots and tries to connect;
  • If it establishes a connection, the process is completed successfully. Otherwise, it will be set up as an Access Point.

This blog post illustrates two different use cases for the WiFiManager library:

  • Example #1 – Autoconnect: Web Server Example
  • Example #2 – Adding Custom Parameters

Prerequisites

Before proceeding with this tutorial we recommend reading the following resources:

Installing WiFiManager and ArduinoJSON

You also need to install the WiFiManager Library and ArduinoJSON Library. Follow these next instructions.

Installing the WiFiManager Library

  1. Click here to download the WiFiManager library. You should have a .zip folder in your Downloads
  2. Unzip the .zip folder and you should get WiFiManager-master folder
  3. Rename your folder from WiFiManager-master to WiFiManager
  4. Move the WiFiManager folder to your Arduino IDE installation libraries folder
  5. Finally, re-open your Arduino IDE

Installing the ArduinoJSON Library

  1. Click here to download the ArduinoJSON library. You should have a .zip folder in your Downloads
  2. Unzip the .zip folder and you should get ArduinoJSON-master folder
  3. Rename your folder from ArduinoJSON-master to ArduinoJSON
  4. Move the ArduinoJSON folder to your Arduino IDE installation libraries folder
  5. Finally, re-open your Arduino IDE

Learn more how to Decode and Encode JSON with Arduino or ESP8266 using the Arduino JSON Library.


Example #1 – WiFiManager with ESP8266: Autoconnect Example

This first example is based on the ESP8266 Web Server post, where you build a web server with an ESP8266 to control two outputs (watch the video tutorial below).

For Example #1 we’ll use the previous project, but instead of hard-coding the SSID and password, you’ll be able to configure it with the WiFiManager library.

Code

Having the ESP8266 add-on for the Arduino IDE installed (How to Install the ESP8266 Board in Arduino IDE), go to Tools and select “ESP-12E” (or choose the development board that you’re using). Here’s the code that you need to upload to your ESP8266:

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         // https://github.com/tzapu/WiFiManager

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

void setup() {
  Serial.begin(115200);
  
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // WiFiManager
  // Local intialization. Once its business is done, there is no need to keep it around
  WiFiManager wifiManager;
  
  // Uncomment and run it once, if you want to erase all the stored information
  //wifiManager.resetSettings();
  
  // set custom ip for portal
  //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

  // fetches ssid and pass from eeprom and tries to connect
  // if it does not connect it starts an access point with the specified name
  // here  "AutoConnectAP"
  // and goes into a blocking loop awaiting configuration
  wifiManager.autoConnect("AutoConnectAP");
  // or use this for auto generated name ESP + ChipID
  //wifiManager.autoConnect();
  
  // if you get here you have connected to the WiFi
  Serial.println("Connected.");
  
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 5  
            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // If the output5State is off, it displays the ON button       
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button       
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

View raw code

This code needs to include the following libraries for the WiFiManager:

#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>

You also need to create a WiFiManager object:

WiFiManager wifiManager;

And run the autoConnect() method:

wifiManager.autoConnect("AutoConnectAP");

That’s it! By adding these new lines of code to your ESP8266 projects, you’re able to configure Wi-Fi credentials using the WiFiManager.

Accessing the WiFiManager AP

If it’s your first time running the WiFiManager code with your ESP8266 board, you’ll see the next messages being printed in your Arduino IDE Serial Monitor.

You can either use your computer/laptop to connect to the AutoConnectAP Access point:

Then, open your browser and type the following IP address: 192.168.4.1. This loads the next web page, where you can set your Wi-Fi credentials:

Alternatively, you can use your smartphone, activate Wi-Fi and connect to AutoConnectAP as follows:

You should see a a window similar to the one shown in the figure below. Then, press the “SIGN IN” button:

Configuring the WiFi page

You’ll be redirected to a web page at 192.168.4.1 that allows you to configure your ESP’s WiFi credentials. Press the “Configure WiFi” button:

Choose your desired network by tapping its name and the SSID should be filled instantly (in my case “MEO-620B4B”):

After that, type your password and press “save“:

You’ll see a similar message saying “Credentials Saved“:

In the meanwhile, the Serial Monitor displays the scan results of the available Access Points and message stating that Wi-Fi credentials were saved.

Accessing your web server

Now, if you RESET your ESP board, it will print the IP address in the Serial Monitor (in my case it’s 192.168.1.132):

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:

Parts required and schematic

If you want to make this project work, here’s the parts that you need:

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Follow this schematic:


How to Erase Credentials From Your ESP8266

This next line is commented by default, otherwise you would need to configure your ESP8266 every time it boots up.

// Uncomment and run it once, if you want to erase all the stored information
//wifiManager.resetSettings();

If for some reason you want to erase all the saved credentials:

  1. Uncomment the preceding line;
  2. Upload the code to the ESP8266;
  3. Let it run once (reset your board);
  4. Comment that line again;
  5. Upload the code to the ESP8266 with the line commented.

Example #2 – WiFiManager with ESP8266 and Custom Parameters

The WiFiManager has a useful feature that allows you to add custom parameters to the “Configure WiFi” 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..

In Example #2, you’ll make a web server to control an ESP8266 GPIO pin that is defined with a custom parameter set through the WiFiManager.

Code

Having the ESP8266 add-on for the Arduino IDE installed (How to Install the ESP8266 Board in Arduino IDE), go to Tools and select “ESP-12E” (or choose the development board that you’re using). Here’s the code that you need to upload to your ESP8266:

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

#include <FS.h> //this needs to be first, or it all crashes and burns...
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>          // https://github.com/tzapu/WiFiManager
#include <ArduinoJson.h>          // https://github.com/bblanchon/ArduinoJson

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String outputState = "off";

// Assign output variables to GPIO pins
char output[2] = "5";

//flag for saving data
bool shouldSaveConfig = false;

//callback notifying us of the need to save config
void saveConfigCallback () {
  Serial.println("Should save config");
  shouldSaveConfig = true;
}

void setup() {
  Serial.begin(115200);
  
  //clean FS, for testing
  //SPIFFS.format();

  //read configuration from FS json
  Serial.println("mounting FS...");

  if (SPIFFS.begin()) {
    Serial.println("mounted file system");
    if (SPIFFS.exists("/config.json")) {
      //file exists, reading and loading
      Serial.println("reading config file");
      File configFile = SPIFFS.open("/config.json", "r");
      if (configFile) {
        Serial.println("opened config file");
        size_t size = configFile.size();
        // Allocate a buffer to store contents of the file.
        std::unique_ptr<char[]> buf(new char[size]);

        configFile.readBytes(buf.get(), size);
        DynamicJsonBuffer jsonBuffer;
        JsonObject& json = jsonBuffer.parseObject(buf.get());
        json.printTo(Serial);
        if (json.success()) {
          Serial.println("\nparsed json");
          strcpy(output, json["output"]);
        } else {
          Serial.println("failed to load json config");
        }
      }
    }
  } else {
    Serial.println("failed to mount FS");
  }
  //end read
  
  WiFiManagerParameter custom_output("output", "output", output, 2);

  // WiFiManager
  // Local intialization. Once its business is done, there is no need to keep it around
  WiFiManager wifiManager;

  //set config save notify callback
  wifiManager.setSaveConfigCallback(saveConfigCallback);
  
  // set custom ip for portal
  //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

  //add all your parameters here
  wifiManager.addParameter(&custom_output);
  
  // Uncomment and run it once, if you want to erase all the stored information
  //wifiManager.resetSettings();

  //set minimu quality of signal so it ignores AP's under that quality
  //defaults to 8%
  //wifiManager.setMinimumSignalQuality();
  
  //sets timeout until configuration portal gets turned off
  //useful to make it all retry or go to sleep
  //in seconds
  //wifiManager.setTimeout(120);

  // fetches ssid and pass from eeprom and tries to connect
  // if it does not connect it starts an access point with the specified name
  // here  "AutoConnectAP"
  // and goes into a blocking loop awaiting configuration
  wifiManager.autoConnect("AutoConnectAP");
  // or use this for auto generated name ESP + ChipID
  //wifiManager.autoConnect();
  
  // if you get here you have connected to the WiFi
  Serial.println("Connected.");
  
  strcpy(output, custom_output.getValue());

  //save the custom parameters to FS
  if (shouldSaveConfig) {
    Serial.println("saving config");
    DynamicJsonBuffer jsonBuffer;
    JsonObject& json = jsonBuffer.createObject();
    json["output"] = output;

    File configFile = SPIFFS.open("/config.json", "w");
    if (!configFile) {
      Serial.println("failed to open config file for writing");
    }

    json.printTo(Serial);
    json.printTo(configFile);
    configFile.close();
    //end save
  }

  // Initialize the output variables as outputs
  pinMode(atoi(output), OUTPUT);
  // Set outputs to LOW
  digitalWrite(atoi(output), LOW);;
  
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /output/on") >= 0) {
              Serial.println("Output on");
              outputState = "on";
              digitalWrite(atoi(output), HIGH);
            } else if (header.indexOf("GET /output/off") >= 0) {
              Serial.println("Output off");
              outputState = "off";
              digitalWrite(atoi(output), LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for the defined GPIO  
            client.println("<p>Output - State " + outputState + "</p>");
            // If the outputState is off, it displays the ON button       
            if (outputState=="off") {
              client.println("<p><a href=\"/output/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/output/off\"><button class=\"button button2\">OFF</button></a></p>");
            }                  
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

View raw code

Adding custom parameters

To add a custom parameter, you need to add a bunch of code (see the preceding sketch) that allows you to manipulate the /config.json file stored in the ESP. For this tutorial we won’t explain how the custom parameters feature works, but basically if you wanted to create another custom parameter follow these next steps.

In this example, we’ll create a variable to store an MQTT broker server IP address. First, create a char variable:

char output[2];
char mqtt_server[40];

Then, if it’s already saved in the /config.json, you can copy it:

strcpy(output, json["output"]);
strcpy(mqtt_server, json["mqtt_server"]);

Create a WiFiManagerParameter (so, the parameter is displayed in the “Configure WiFi” web page:

WiFiManagerParameter custom_output("output", "output", output, 2);
WiFiManagerParameter custom_mqtt_server("server", "mqtt server", mqtt_server, 40);

Add the variable as a parameter:

wifiManager.addParameter(&custom_output);
wifiManager.addParameter(&custom_mqtt_server);

Check and update the char variables with the latest value:

strcpy(output, custom_output.getValue());
strcpy(mqtt_server, custom_mqtt_server.getValue());

Finally, if the user submits a new value to one of the parameters, this line updates the /config.json file:

json["output"] = output;
json["mqtt_server"] = mqtt_server;

You could repeat this process to add more custom parameters.

Accessing the WiFiManager AP

Use your smartphone, computer or tablet and connect to the AutoConnectAP Access Point:

You should see a a window similar to the one shown in the figure below. Then, press the “SIGN IN” button:

Configuring the WiFi page

You’ll be redirected to a web page at 192.168.4.1 that allows you to configure your ESP’s WiFi credentials. Press the “Configure WiFi” button:

Choose your desired network by tapping its name and the SSID should be filled instantly (in my case “MEO-620B4B”):

After that, type your password, your desired GPIO number (in my case it’s GPIO 5, so I’ve entered 5) and press “save“:

In the meanwhile, the Serial Monitor displays:

  • Scan results of the available Access Points;
  • Message stating that Wi-Fi credentials were saved;
  • Confirmation that the output parameter (that refers to the GPIO) was set to 5: {“output”:”5″}.

Accessing your web server

Now, if you RESET your ESP board, it will print the IP address in the Serial Monitor (in my case it’s 192.168.1.132):

Open your browser and type the IP address. You should see the web server shown below, that allows you to control the GPIO you’ve defined on and off:

Parts required and schematic

If you want to make this project work, here’s the parts that you need:

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Note: if you’ve defined a GPIO number different than GPIO 5 (which is D1 with the NodeMCU board), you need to make a different circuit.

Wrapping Up

That’s it for now, I hope you found this project useful and you can use the WiFiManager library in your projects!

If you like the ESP8266, you may also like:

Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.


Learn how to program and build projects with the ESP32 and ESP8266 using MicroPython firmware DOWNLOAD »

Learn how to program and build projects with the ESP32 and ESP8266 using MicroPython firmware DOWNLOAD »


Enjoyed this project? Stay updated by subscribing our weekly newsletter!

62 thoughts on “WiFiManager with ESP8266 – Autoconnect, Custom Parameter and Manage your SSID and Password”

  1. I know you get out of your way to help us understand whatever topic you are dealing with. For that I really appreciate your excellent tutorials and courses.
    In this one you “touched” on the role of the WiFi manger AND the config file INSIDE THE ESP8266. This is a very important part of ESP8288, and I will appreciate if you dedicate a tutorial JUST on this important topic of ESP8266 config file. and the wifi manager.

    Maybe you did talk about it somewhere in your site, if this is the case, my apology; and I hope you direct me to the links that address this important topic ( IMHO)

    • Hi Samir,
      Thanks for sharing your interest about that topic, however at the moment I don’t have any tutorial about the config file at the moment…
      I might write a tutorial about that subject in the future.

      Thanks for your feedback.
      Regards,
      Rui

    • I’m not sure why it didn’t work… That’s the official method to clear the access points. In fact, to test this project, I’ve deleted more than 10 times using that function and it worked every time.
      Make sure you restart your ESP8266 at least one or two times after uploading the sketch with the reset line uncommented:

      wifiManager.resetSettings();

  2. The example wont compile. here is the error for the arduino console.

    “/tmp/arduino_build_335203/sketch/WiFiManager.ino.cpp” -o “/tmp/arduino_build_335203/sketch/WiFiManager.ino.cpp.o”
    /home/jake/Arduino/programs/WiFiManager/WiFiManager.ino: In function ‘void setup()’:
    WiFiManager:81: error: ‘class WiFiManager’ has no member named ‘setAPConfig’
    wifiManager.setAPConfig(IPAddress(192,168,200,1), IPAddress(192,168,200,1), IPAddress(255,255,255,0));
    ^
    Using library ESP8266WiFi at version 1.0 in folder: /home/jake/.arduino15/packages/esp8266/hardware/esp8266/2.4.0/libraries/ESP8266WiFi
    Using library DNSServer at version 1.1.0 in folder: /home/jake/.arduino15/packages/esp8266/hardware/esp8266/2.4.0/libraries/DNSServer
    Using library ESP8266WebServer at version 1.0 in folder: /home/jake/.arduino15/packages/esp8266/hardware/esp8266/2.4.0/libraries/ESP8266WebServer
    Using library WiFiManager at version 0.12 in folder: /home/jake/Arduino/libraries/WiFiManager
    Using library ArduinoJson at version 5.13.1 in folder: /home/jake/Arduino/libraries/ArduinoJson
    exit status 1
    ‘class WiFiManager’ has no member named ‘setAPConfig’

    • It looks like you might be running an older version of the WiFiManager library or an older version of the ESP8266 add-on for the Arduino IDE.
      Make sure you double-check and you have everything updated.
      Let me know if that solves your problem.

      Regards,
      Rui

  3. When compiling example 1 i get a error msg: “error compiling to board WeMos D1 R2 & mini”. This error appears also on the WiFiManager examples. Any idea?

      • Hi Sara,
        i already did all the things in your suggestions, without success, also i uninstalled all ESP plugins from my arduino IDE and reinstalled it. Did also not work …
        But then, i uninstalled all ESP plugins, then deleted all ESP files in the “c:/users/MyAccount/AppData/local/arduino15/” folder and after that, reinstalled everything from scratch.
        Now ist works fine ! Maybe important for other users with te sam problem …

        Anyway, thanks for your help and your great homepage. It’s a very good starting point to get familar with the ESP8266 !
        Manfred

        • It looks like you have a library missing in your Arduino IDE.
          Did you install the WiFi Manager library or the ArduinoJSON? Make sure you have all the libraries installed that your sketch needs.

  4. Hi,
    I tried this project using an ESP01 :
    – compiling = ok
    – upload = ok
    – reboot = ok
    I got the correct message on the serial monitor up to the line :”*WM: HTTP server started” then nothing
    _ when I check the wifi list, I can see : AutoConnectAP (but it appears and disappears erratically)
    – when it appears, if I try to connect, I get after about 5 seconds “cannot connect to the network”

    please advise
    (I cannot check with another ESP, I have got only one at the moment)
    regards

    • Hi Yodrack.
      I’ve never experienced that error before, please try to search for your exact problem and someone on GitHub might be able to help you.
      Make sure you’re using the latest stable libraries for the ESP8266 and WiFi Manager dependencies…
      Regards,
      Rui

      • Thank you for your answer. I tried several sketches dealing with wifi on my ESP01. I got always the same problem, the PC or smartphone cannot connect to ESP in server mode, and ESP cannot connect to Wifi in client mode.
        I tried AT commands , same problem
        I thing my ESP is out of order regarding the Wifi section, but other sketches (with no realation to Wifi) run without any problem.

        I order other ESP (01, 03, 07, 12) and I will try again when I received them.
        regards

        • Hi Ruy Santos
          I received new ESP’s and I tried again with ESP01
          Every things works with this new device.
          I can get the list of AP (I did’n check further at the moment).

          It is very strange that my previous ESP does’nt work on the Wifi side,
          the rest works without any problem (I can activate GPIO’s)

          I checked the antenna if there were a microcut in the wire, I even changed the capacitor between ESP8266ex and antenna, nothing change !

          Anyway, it does not matter, I can pursue the work..
          Regards

  5. Hi,
    I try example number 1 and it was uploaded successfully to my esp8266 board I saw the “autoconnect” network and connect to it.
    I try to open the IP 192.168.4.1 and it just returns an empty page! do I missed something ??

  6. I was very interested in WiFiManager and I would like to use it with BLYNK, but I do not know how to load ssid and pass from eeprom into variables so I can use them in Blynk.begin (auth, ssid, pass);

    Thanks

    • I don’t have any examples on that subject, but please read the “Example #2 – Adding Custom Parameters” section.
      You should be able to create a pass for your example…

  7. The interesting thing about Raspberry Pi 3 is that it has a bit of everything: wired and wireless connectivity, USB, GPIO, camera, display, processing, video and graphics. So, unlike the transition from Raspberry Pi 2 to Raspberry Pi 3, where we added wireless, I don”t think that the next Raspberry Pi be qualitatively different: it will be more of the same, and as always how much more will depend on what we can squeeze into that $35 price point.

  8. i have a weird problem when i compile it. The arduino IDE soft stop with “error compiling” causing by Manager library. Do you have an idea why?

  9. I am using NodeMcu 0.9 ESP-12 board and getting an error on example2 ‘stray \342’ in program at line
    client.println(“”);

    I have the latest libs – Arduino 1.8.6 please advise

    • Paul, i hope you already found the answher, but for other people: this error is usually seen when you copy non-pure ASCII from a formatted website. The error that is the most frequent is that you copy so called elegant quotes instead of regular double quotes. Make sure you copy so called Raw code

    • Thanks for asking, but I don’t write custom code due to time constraints. If you have an exact problem with my project please let me know which error you are encountering…
      Regards,
      Rui

  10. Sir,
    Your tutorials are awesome, and they are working very nicely.
    Can you please help me in making a esp8266 webserver in AP mode in which there is a download button that can download a file from the sd card to the client

  11. Very nice tutorial. I was not a aware of the WiFiManager capability to add custom parameters.

    It worked great when I added a single custom parameter. However, I ran into a problem when I wanted to add a second custom parameter. Even though I (*think*) I’m doing it exactly the same way, it crashes every time. I think it’s in the second call to addParameter(). Is that something that should be expected to work? Is there anything special about having more than one paramter? Thanks!

    • Hi Peter, please take a look at the official example “AutoConnectWithFSParameters.ino” to see how to add more than 1 parameter: github.com/tzapu/WiFiManager/blob/master/examples/AutoConnectWithFSParameters/AutoConnectWithFSParameters.ino

  12. How to open WifiManager again, where a device is connected to network?
    I can’t find it on list available acces points.

    • You need to add this to the setup to run it again. In essence, you clear all data in memory.

      wifiManager.resetSettings();

      I would use a button to do that. If the button is pushed during reset then this line will be running to clear all settings in memory.

  13. I am currently trying to use WifiManager’s custom parameters to store an Adafruit username/key, so that I can send information to Adafruit without hardcoding login information.

    I have no problems when I hardcode all values. When I declare an empty “adafruit_key” char array and enter my key on the interface, I still have no problems. However, I get an error on my Adafruit Monitor when I try to enter my Adafruit username on the interface instead of hardcoding it.

    With each attempt to log data, instead of recording the correct data, my Adafruit Monitor displays “mqtt subscription error on /f/alli_test_temp/csv: you are not authorized.”

    It seems that Adafruit does not want to accept my username when it is entered through WifiManager. I have not been able to find much information on this error – I don’t know if the issue is the WifiManager’s custom parameters, or Adafruit itself.

    Does anyone have experience using WifiManager with Adafruit who could help? Even just pointing me to a place I could find more information would be greatly appreciated. Thank you!

    • Hello Alli,
      Sorry to hear that you can’t make it work! I’ve never integrated with the Adafruit services. In my opinion, it must be something missing in your code to make it work, but I don’t have have tutorials on that exact subject.

      Regards,
      Rui

  14. Hi Rui, thanks a lot for your code!!!

    I am testing it and it works great!!!

    I am only experiencing some problems when I´m using my smartphone with chrome because sometime it doesn’t disconnect the client, so, if I switch to my browser in my PC I got stucked in the PC browser, I can only send commands in the phone, because the client is still connected in the phone.

    Here you can see how the client is still connected using the phone, it disconnects properly but inmediately it connects again:

    GET /4/off HTTP/1.1
    01:36:26.620 -> Host: 192.168.2.184
    01:36:26.620 -> Connection: keep-alive
    01:36:26.620 -> Upgrade-Insecure-Requests: 1
    01:36:26.620 -> User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; Mi MIX 2S Build/OPR1.170623.032) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36
    01:36:26.655 -> Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    01:36:26.655 -> Referer: http://192.168.2.184/4/on
    01:36:26.655 -> Accept-Encoding: gzip, deflate
    01:36:26.655 -> Accept-Language: es-ES,es;q=0.9,en;q=0.8
    01:36:26.655 ->
    01:36:26.655 -> GPIO 4 off
    01:36:26.655 -> Client disconnected.
    01:36:26.655 ->
    01:36:26.655 -> New Client.

    Do you know why is this happenning?

  15. hello i use wifimanger and it works great and saves the cridentials so i dont have to reenter them, but i need to access it from an android as well so i changed my wifimanger to ken taylors version. that works great to access with the androit and it prints out the ip address to access and everything but IT DONT SAVE the cridentials and so i have to reenter everytime i turn on my device. i read in kens notes he did that for a reason but does anyone have a fix for it so that i can get the best of both worlds? please help!

  16. The wifi manager is very slic but would be much better if it added the ability to read back I.P address through the access point after connecting with the router as a station, rather than needing to read the Station I.P. back on a serial monitor. Does this capability exist? Thanks.

  17. Hi again. I recently asked if there was a way to get the Station IP read back when in AP mode via wifimanager. I found that it is available with the OnDemandConfigPortal example. Also the wifiManager.setAPConfig you have commented out in your above code should be changed to wifiManager.setSTAStaticIPConfig if it is to be used.
    Your tutorials are very useful for filling in most gaps, ofcourse there are always going to be more gaps.

    • Hi Chris.
      I’m sorry I missed your latest comment.
      I’m glad you’ve found the solution for what you were looking for. Also, thank you for sharing this solution, it may be useful for other users.
      Thank You.
      Happy new year.

    • Hi Chris. We are thinking same thing. Where did you found OnDemandConfigPortal example? Thanks.

      By the way, thank you Sara and Rui for this tutorial.

  18. Hi,
    Thanks for the tutorial. I did this project, it works perfectly as expected. I would like to add a manual override button to switch off and on. Could you suggest me what all the changes in code has to be done? Hardware part connecting I can do but I don’t have coding knowledge.

  19. Thanks for your quick reply. I am using this for controlling the pump in my apartment.
    Purpose of the button is to allow other people without app manually switch on or off whenever required.

    • Hi.
      You need to create a global variable to hold the state of the button.
      Add an if statement to check the button state, and change its value accordingly.
      Alternatively, you can set the button as an interrupt, that when activated runs a function that changes the previous button state.
      Regards,
      Sara

  20. Hi,
    Pretty interesting project, this was working fine. But i need to limit the number of attempt for wifi connection in wifimanager. If wifimanger not connected then come out of autoconnect loop and execute the rest of codes.
    or if its possible to assign some connection time, lets say 2 min when esp started. if wifi is not connected then execute the rest of codes offline.
    Help me

    • Hi Paras, you can use the following statement to check if the ESP is connected to WiFi or not:
      (WiFi.status() != WL_CONNECTED)

      You can use that in a while, for or if statement with a counter to decide what to do in case the counter reaches a certain number, or in case the ESP connects to WiFi.

      Regards,
      Sara

  21. Hi Sara, hi Rui, as usual really interesting tutorial.
    I would point out the json library classes in the code are referred to the json library version 5.xx.x, if you use them with actual library (version 6.12) the compiler is giving out some error.
    I solved removing the 6.12 library and installing an older version.

    Ciao

    • Hi.
      You’re right.
      We need to update this tutorial to use the latest library.
      Thanks for pointing that out.
      Regards,
      Sara

  22. Hi, again here!!!

    What should I change in order to store a number in a variable instead of GPIO controlling from webserver ?

  23. Hi, so today I’m having time to test this the web server, all seems fine but I’m having some difficult to get connected from Smartphone.

    In fact if I try to connect to the AP, as shown in the network list “AutoconnectAP”, very often I receive access denied error. Once connected, when connected, the pages are very slow and when I clik on the wifi setting button (192.168.4.1/wifi) the page get timeout error.

    Please help to solve this seems that the scope of the tutorial is hard-code avoiding so it comes really comfortable to have the chance of setting by smartphone.

    By laptop all is going fine!

  24. Great project, thanks for sharing.

    You might want to update the second example to ArdinoJson 6.x otherwise some people not use to json will have problems with the syntax changes…

  25. I have successfully used wifimanager to setup the webpage to input the wifi parameters to connect to wifi without putting those parameters directly into the sketch.

    I have also tried Example #2 in your note

    https://randomnerdtutorials.com/wifimanager-with-esp8266-autoconnect-custom-parameter-and-manage-your-ssid-and-password/

    I want to be able to input not only the wifi username and password, but also the username and password to connect to an mqtt broker.

    I followed the suggested directions to add parameters in that note, and it compiles, but when it comes up it still only shows the ON/OFF button, but not the mqtt_server box.

    In addition to get your original sketch to work, I had to upgrade the json calls, as per a note seen when I compile.

    The ON/OFF button is in the HTML file that is generated in the sketch. It uses a “button” call. How do I get it to request the strings that are the mqtt username and password?

    Do you have a complete sketch in which you have added parameters, which are initially requested throough the web then stored in SPIFF for subsequent use? Your example #2 only suggests adding variables for mqtt_server but doesn’t seem to include the code to add that new parameter to the html page.

    Thanks

Leave a Comment

Download our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.