[GH-ISSUE #1590] Example for custom parameters

kerem commented

2026-02-28 01:29:44 +03:00

Owner

Originally created by @probonopd on GitHub (Apr 16, 2023).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1590

Documentation says

You can use WiFiManager to collect more parameters than just SSID and password. This could be helpful for configuring stuff like MQTT host and port, blynk or emoncms tokens, just to name a few. You are responsible for saving and loading these custom values. The library just collects and displays the data for you as a convenience.

I think there should be an example showing how to actually do this. Something like this:

#include <WiFiManager.h>
#include <Preferences.h>

char mqtt_server[40];
int mqtt_port;
char mqtt_username[40];
char mqtt_password[40];
char mqtt_topic[40] = "your_topic";

Preferences preferences;

void saveConfigCallback() {
  preferences.putString("mqtt_server", mqtt_server);
  preferences.putInt("mqtt_port", mqtt_port);
  preferences.putString("mqtt_username", mqtt_username);
  preferences.putString("mqtt_password", mqtt_password);
  preferences.putString("mqtt_topic", mqtt_topic);
}

void setup() {

  WiFiManager wifiManager;
  wifiManager.setSaveConfigCallback(saveConfigCallback);
  wifiManager.setConfigPortalTimeout(180);

  preferences.begin("mqtt_config", false);
  strcpy(mqtt_server, preferences.getString("mqtt_server", "default_mqtt_server").c_str());
  mqtt_port = preferences.getInt("mqtt_port", 1883);
  strcpy(mqtt_username, preferences.getString("mqtt_username", "default_username").c_str());
  strcpy(mqtt_password, preferences.getString("mqtt_password", "default_password").c_str());
  strcpy(mqtt_topic, preferences.getString("mqtt_topic", "default_mqtt_topic").c_str());

  WiFiManagerParameter custom_mqtt_server("server", "MQTT Server", mqtt_server, 40);
  WiFiManagerParameter custom_mqtt_port("port", "MQTT Port", String(mqtt_port).c_str(), 6);
  WiFiManagerParameter custom_mqtt_username("username", "MQTT Username", mqtt_username, 40);
  WiFiManagerParameter custom_mqtt_password("password", "MQTT Password", mqtt_password, 40);
  WiFiManagerParameter custom_mqtt_topic("topic", "MQTT Topic", mqtt_topic, 40);

  wifiManager.addParameter(&custom_mqtt_server);
  wifiManager.addParameter(&custom_mqtt_port);
  wifiManager.addParameter(&custom_mqtt_username);
  wifiManager.addParameter(&custom_mqtt_password);
  wifiManager.addParameter(&custom_mqtt_topic);

  wifiManager.setCustomHeadElement("<style>body{max-width:500px;margin:auto}</style>");

  wifiManager.autoConnect();

  strcpy(mqtt_server, custom_mqtt_server.getValue());
  mqtt_port = atoi(custom_mqtt_port.getValue());
  strcpy(mqtt_username, custom_mqtt_username.getValue());
  strcpy(mqtt_password, custom_mqtt_password.getValue());
  strcpy(mqtt_topic, custom_mqtt_topic.getValue());

  preferences.putString("mqtt_server", mqtt_server);
  preferences.putInt("mqtt_port", mqtt_port);
  preferences.putString("mqtt_username", mqtt_username);
  preferences.putString("mqtt_password", mqtt_password);
  preferences.putString("mqtt_topic", mqtt_topic);

  // Now can use the variables, e.g., like this:
  // mqttClient.setServer(mqtt_server, mqtt_port);
}

void loop() {

}

Originally created by @probonopd on GitHub (Apr 16, 2023). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1590 Documentation says > You can use WiFiManager to collect more parameters than just SSID and password. This could be helpful for configuring stuff like MQTT host and port, [blynk](http://www.blynk.cc/) or [emoncms](http://emoncms.org/) tokens, just to name a few. You are responsible for saving and loading these custom values. The library just collects and displays the data for you as a convenience. I think there should be an example showing how to actually do this. Something like this: ``` #include <WiFiManager.h> #include <Preferences.h> char mqtt_server[40]; int mqtt_port; char mqtt_username[40]; char mqtt_password[40]; char mqtt_topic[40] = "your_topic"; Preferences preferences; void saveConfigCallback() { preferences.putString("mqtt_server", mqtt_server); preferences.putInt("mqtt_port", mqtt_port); preferences.putString("mqtt_username", mqtt_username); preferences.putString("mqtt_password", mqtt_password); preferences.putString("mqtt_topic", mqtt_topic); } void setup() { WiFiManager wifiManager; wifiManager.setSaveConfigCallback(saveConfigCallback); wifiManager.setConfigPortalTimeout(180); preferences.begin("mqtt_config", false); strcpy(mqtt_server, preferences.getString("mqtt_server", "default_mqtt_server").c_str()); mqtt_port = preferences.getInt("mqtt_port", 1883); strcpy(mqtt_username, preferences.getString("mqtt_username", "default_username").c_str()); strcpy(mqtt_password, preferences.getString("mqtt_password", "default_password").c_str()); strcpy(mqtt_topic, preferences.getString("mqtt_topic", "default_mqtt_topic").c_str()); WiFiManagerParameter custom_mqtt_server("server", "MQTT Server", mqtt_server, 40); WiFiManagerParameter custom_mqtt_port("port", "MQTT Port", String(mqtt_port).c_str(), 6); WiFiManagerParameter custom_mqtt_username("username", "MQTT Username", mqtt_username, 40); WiFiManagerParameter custom_mqtt_password("password", "MQTT Password", mqtt_password, 40); WiFiManagerParameter custom_mqtt_topic("topic", "MQTT Topic", mqtt_topic, 40); wifiManager.addParameter(&custom_mqtt_server); wifiManager.addParameter(&custom_mqtt_port); wifiManager.addParameter(&custom_mqtt_username); wifiManager.addParameter(&custom_mqtt_password); wifiManager.addParameter(&custom_mqtt_topic); wifiManager.setCustomHeadElement("<style>body{max-width:500px;margin:auto}</style>"); wifiManager.autoConnect(); strcpy(mqtt_server, custom_mqtt_server.getValue()); mqtt_port = atoi(custom_mqtt_port.getValue()); strcpy(mqtt_username, custom_mqtt_username.getValue()); strcpy(mqtt_password, custom_mqtt_password.getValue()); strcpy(mqtt_topic, custom_mqtt_topic.getValue()); preferences.putString("mqtt_server", mqtt_server); preferences.putInt("mqtt_port", mqtt_port); preferences.putString("mqtt_username", mqtt_username); preferences.putString("mqtt_password", mqtt_password); preferences.putString("mqtt_topic", mqtt_topic); // Now can use the variables, e.g., like this: // mqttClient.setServer(mqtt_server, mqtt_port); } void loop() { } ```

kerem

2026-02-28 01:29:44 +03:00

closed this issue
added the
Example
label

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@Halvhjearne commented on GitHub (Apr 27, 2023):

this was super usefull.
however i could be wrong but i think i think the way you do it there, the device will write to the flash on every reboot if im not mistaken.
maybe it would be better to have the saveConfigCallback change a bool to true and then put line 55-59 inside an if statement that triggers from said bool?

i did not test this ...

#include <WiFiManager.h>
#include <Preferences.h>

char mqtt_server[40];
int mqtt_port;
char mqtt_username[40];
char mqtt_password[40];
char mqtt_topic[40] = "your_topic";
bool shouldSaveConfig = false;

Preferences preferences;

void saveConfigCallback() {
  shouldSaveConfig = true;
}

void setup() {

  WiFiManager wifiManager;
  wifiManager.setSaveConfigCallback(saveConfigCallback);
  wifiManager.setConfigPortalTimeout(180);

  preferences.begin("mqtt_config", false);
  strcpy(mqtt_server, preferences.getString("mqtt_server", "default_mqtt_server").c_str());
  mqtt_port = preferences.getInt("mqtt_port", 1883);
  strcpy(mqtt_username, preferences.getString("mqtt_username", "default_username").c_str());
  strcpy(mqtt_password, preferences.getString("mqtt_password", "default_password").c_str());
  strcpy(mqtt_topic, preferences.getString("mqtt_topic", "default_mqtt_topic").c_str());

  WiFiManagerParameter custom_mqtt_server("server", "MQTT Server", mqtt_server, 40);
  WiFiManagerParameter custom_mqtt_port("port", "MQTT Port", String(mqtt_port).c_str(), 6);
  WiFiManagerParameter custom_mqtt_username("username", "MQTT Username", mqtt_username, 40);
  WiFiManagerParameter custom_mqtt_password("password", "MQTT Password", mqtt_password, 40);
  WiFiManagerParameter custom_mqtt_topic("topic", "MQTT Topic", mqtt_topic, 40);

  wifiManager.addParameter(&custom_mqtt_server);
  wifiManager.addParameter(&custom_mqtt_port);
  wifiManager.addParameter(&custom_mqtt_username);
  wifiManager.addParameter(&custom_mqtt_password);
  wifiManager.addParameter(&custom_mqtt_topic);

  wifiManager.setCustomHeadElement("<style>body{max-width:500px;margin:auto}</style>");

  wifiManager.autoConnect();

  strcpy(mqtt_server, custom_mqtt_server.getValue());
  mqtt_port = atoi(custom_mqtt_port.getValue());
  strcpy(mqtt_username, custom_mqtt_username.getValue());
  strcpy(mqtt_password, custom_mqtt_password.getValue());
  strcpy(mqtt_topic, custom_mqtt_topic.getValue());
  if (shouldSaveConfig) {
    preferences.putString("mqtt_server", mqtt_server);
    preferences.putInt("mqtt_port", mqtt_port);
    preferences.putString("mqtt_username", mqtt_username);
    preferences.putString("mqtt_password", mqtt_password);
    preferences.putString("mqtt_topic", mqtt_topic);
  }

  // Now can use the variables, e.g., like this:
  // mqttClient.setServer(mqtt_server, mqtt_port);
}

void loop() {

}

@Halvhjearne commented on GitHub (Apr 27, 2023): this was super usefull. however i could be wrong but i think i think the way you do it there, the device will write to the flash on every reboot if im not mistaken. maybe it would be better to have the saveConfigCallback change a bool to true and then put line 55-59 inside an if statement that triggers from said bool? i did not test this ... ```C++ #include <WiFiManager.h> #include <Preferences.h> char mqtt_server[40]; int mqtt_port; char mqtt_username[40]; char mqtt_password[40]; char mqtt_topic[40] = "your_topic"; bool shouldSaveConfig = false; Preferences preferences; void saveConfigCallback() { shouldSaveConfig = true; } void setup() { WiFiManager wifiManager; wifiManager.setSaveConfigCallback(saveConfigCallback); wifiManager.setConfigPortalTimeout(180); preferences.begin("mqtt_config", false); strcpy(mqtt_server, preferences.getString("mqtt_server", "default_mqtt_server").c_str()); mqtt_port = preferences.getInt("mqtt_port", 1883); strcpy(mqtt_username, preferences.getString("mqtt_username", "default_username").c_str()); strcpy(mqtt_password, preferences.getString("mqtt_password", "default_password").c_str()); strcpy(mqtt_topic, preferences.getString("mqtt_topic", "default_mqtt_topic").c_str()); WiFiManagerParameter custom_mqtt_server("server", "MQTT Server", mqtt_server, 40); WiFiManagerParameter custom_mqtt_port("port", "MQTT Port", String(mqtt_port).c_str(), 6); WiFiManagerParameter custom_mqtt_username("username", "MQTT Username", mqtt_username, 40); WiFiManagerParameter custom_mqtt_password("password", "MQTT Password", mqtt_password, 40); WiFiManagerParameter custom_mqtt_topic("topic", "MQTT Topic", mqtt_topic, 40); wifiManager.addParameter(&custom_mqtt_server); wifiManager.addParameter(&custom_mqtt_port); wifiManager.addParameter(&custom_mqtt_username); wifiManager.addParameter(&custom_mqtt_password); wifiManager.addParameter(&custom_mqtt_topic); wifiManager.setCustomHeadElement("<style>body{max-width:500px;margin:auto}</style>"); wifiManager.autoConnect(); strcpy(mqtt_server, custom_mqtt_server.getValue()); mqtt_port = atoi(custom_mqtt_port.getValue()); strcpy(mqtt_username, custom_mqtt_username.getValue()); strcpy(mqtt_password, custom_mqtt_password.getValue()); strcpy(mqtt_topic, custom_mqtt_topic.getValue()); if (shouldSaveConfig) { preferences.putString("mqtt_server", mqtt_server); preferences.putInt("mqtt_port", mqtt_port); preferences.putString("mqtt_username", mqtt_username); preferences.putString("mqtt_password", mqtt_password); preferences.putString("mqtt_topic", mqtt_topic); } // Now can use the variables, e.g., like this: // mqttClient.setServer(mqtt_server, mqtt_port); } void loop() { } ```

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@tablatronix commented on GitHub (Apr 27, 2023):

There are already examples for spiffs and an empty one for littlefs, they can probably be cleaned up

@tablatronix commented on GitHub (Apr 27, 2023): There are already examples for spiffs and an empty one for littlefs, they can probably be cleaned up

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@probonopd commented on GitHub (Apr 27, 2023):

Where? I can't seem to find them on https://github.com/tzapu/WiFiManager/wiki/Examples.

@probonopd commented on GitHub (Apr 27, 2023): Where? I can't seem to find them on https://github.com/tzapu/WiFiManager/wiki/Examples.

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@tablatronix commented on GitHub (Apr 27, 2023):

https://github.com/tzapu/WiFiManager/tree/master/examples/Parameters

@tablatronix commented on GitHub (Apr 27, 2023): https://github.com/tzapu/WiFiManager/tree/master/examples/Parameters

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@probonopd commented on GitHub (Apr 29, 2023):

Thanks, maybe it should be linked from https://github.com/tzapu/WiFiManager/wiki/Examples.

@probonopd commented on GitHub (Apr 29, 2023): Thanks, maybe it should be linked from https://github.com/tzapu/WiFiManager/wiki/Examples.

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@msx80 commented on GitHub (May 31, 2023):

I for one think the example provided here is interesting and useful enougth to grant inclusion in the Examples or at least in the example wiki page.

The Preferences machinery is much more suitable for saving the kind of parameters handled by WifiManager than LittleFS or SPIFF, where you have to deal with file operations (open, read, write etc) and/or json parsing. Small, short values are exacly what Preferences is about and it's way more elegant and clear.

One could even go as far as to argue it could be the default way of saving data, integrated directly into WifiManager, but that's for another discussion.

@msx80 commented on GitHub (May 31, 2023): I for one think the example provided here is interesting and useful enougth to grant inclusion in the Examples or at least in the example wiki page. The Preferences machinery is much more suitable for saving the kind of parameters handled by WifiManager than LittleFS or SPIFF, where you have to deal with file operations (open, read, write etc) and/or json parsing. Small, short values are exacly what Preferences is about and it's way more elegant and clear. One could even go as far as to argue it could be the default way of saving data, integrated directly into WifiManager, but that's for another discussion.

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@tablatronix commented on GitHub (May 31, 2023):

Sorry I didn't even see the example, I will take a look. I personally use structs and just save/read them from flash or wherever.

I intended for someone to make a wrapper for params to do this, there can be different subclasses for params/FS, and you can add input types etc. See the child class example. Someone in issues helped create that for interating params programatically, and I might have to fix some of the ID issues

What is preferences.h?

I have no issue including better functionality, but I really do not want any FS stuff in WM if its not abstracted, someone will want to save to SD card or PSRAM or spi flash something etc

@tablatronix commented on GitHub (May 31, 2023): Sorry I didn't even see the example, I will take a look. I personally use structs and just save/read them from flash or wherever. I intended for someone to make a wrapper for params to do this, there can be different subclasses for params/FS, and you can add input types etc. See the child class example. Someone in issues helped create that for interating params programatically, and I might have to fix some of the ID issues What is preferences.h? I have no issue including better functionality, but I really do not want any FS stuff in WM if its not abstracted, someone will want to save to SD card or PSRAM or spi flash something etc

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@msx80 commented on GitHub (Jun 12, 2023):

What is preferences.h?

It's a default preference storing functionality for ESP32. It doesn't require installing a library, it's part of the package distribution.

But there's a compatible library that's a drop-in replacement for various other boards, like other ESP, various Arduinos and RP2040.

"Preferences" are actually the most abstracted persistent memory access technology. The default ESP32 one uses Non-Volatile-Storage, the compatible library uses a variety of FS systems depending on the underlying platform. All with the same interface.

@msx80 commented on GitHub (Jun 12, 2023): > What is preferences.h? It's a default preference storing functionality for ESP32. It doesn't require installing a library, it's part of the [package distribution](https://github.com/espressif/arduino-esp32/tree/master/libraries/Preferences). But there's a [compatible library](https://github.com/vshymanskyy/Preferences) that's a drop-in replacement for various other boards, like other ESP, various Arduinos and RP2040. "Preferences" are actually the most abstracted persistent memory access technology. The default ESP32 one uses Non-Volatile-Storage, the compatible library uses a variety of FS systems depending on the underlying platform. All with the same interface.

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@tablatronix commented on GitHub (Jun 12, 2023):

I have never heard of it, thanks.

@tablatronix commented on GitHub (Jun 12, 2023): I have never heard of it, thanks.

kerem commented

2026-02-28 01:29:45 +03:00

Author

Owner

@jonathanendersby commented on GitHub (Aug 5, 2023):

@tzapu These examples should be in the actual repo. They are clean and work!

@jonathanendersby commented on GitHub (Aug 5, 2023): @tzapu These examples should be in the actual repo. They are clean and work!

kerem referenced this issue

2026-02-28 02:12:51 +03:00

[PR #1357] [CLOSED] Merge changes from master into feature_asyncwebserver #1743

Rows
Columns

[GH-ISSUE #1590] Example for custom parameters #1357