Text Us Website Widget

Everyware provides a Text Us widget that merchants and integrated partners may customize and use their website. Follow this guide to update and preview your Text Us widget before installing it on your site.

(Text Us V2 Released Feb 2024)

Configure in Everyware

Log into the Everyware portal and once your widget has been enabled for your account, you will see Configure Text Us Widget settings under Settings > Widgets.

Adjust your auto reply message, button and pop up styling, save and update your widget code. Copy the code, test it and save it to your site's HTML.

Edit Button & Pop Up Page Appearance

You can use the default Everyware branded widget styling or customize the following style elements of your Text Us widget in the Everyware portal:

Text Us Button Font Color
Text Us Button Background Color
Pop Up Font Color
Pop Up Background Color
Pop Up Button Font Color
Pop Up Button Background Color

🚧 Check Your ID

Make sure the Text Us widget code you have installed to your website contains the same saleSiteIdentifier provided in your Everyware portal Text Us widget settings under Settings > Widgets.

Ex: The sample code provided here will associate texts to the Everyware Demo Account with this saleSiteIdentifier ''

Copy, Paste and Test Widget Code

When you are finished customizing all elements click the Save and Update button.

Click the Copy Embed Code button to copy the updated code to your clipboard. Preview the results of your style customization by pasting the updated widget code into a code editor such as CodePen.

After testing and configuring your code to achieve the desired result, paste the final widget code into your website HTML heading.

Parameter	Definition
.textUsButton
buttontext
buttonclass
showbutton
csshref
enpointURL
saleSiteIdentifier	GUID that ties this Text Us widget with your Everyware site.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .textUsButton {
        display: inline-block;
        padding: 10px 30px;
        background: #504e8c;
        color: #ffffff;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 900;
        font-size: 20px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        box-shadow: 0 -5px 20px rgb(0 0 0 / 30%);
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="EWWidget">
      <script src="https://portaltest.everyware.com/Static/EwTextUsWidget.js"></script>
      <script>
        init(
          (div = "EWWidget"),
          (buttontext = "Text Us"),
          (buttonclass = "textUsButton"),
          (showbutton = true),
          (csshref = ""),
          (enpointURL = "https://portaltest.everyware.com"),
          (saleSiteIdentifier = 'fef29865-7044-4b59-a3d5-7b9a461d372f')
        );
      </script>
    </div>
  </body>
</html>

Text Us Modal on Everyware.com

<div id="TextUsModal" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style="display: block; padding-right: 19px;">

    <div class="modal-dialog">

        {/* Modal content*/}

        <div class="modal-content">

			<div class="modal-header" style="min-height: 20px !important; border: 0px; width: 100% !important;">

				<div class="container">

					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="padding-top: 5px;">

						<img src="/images/modelpopclosebtn.png" alt="close">

					</button>

				</div>

			</div>

            <div class="modal-body">

                <div style="padding:40px 0px;" id="txtUs">

                   	<div style="padding:30px 20px 20px 20px;">

								  <img src="/images/chat-icon.png" width="90px">

							  </div>

                    <div class="lbl" style={{ color: "#fff", fontSize: "36pt", fontStyle: "normal", fontWeight: "normal", fontFamily: "'Roboto Condensed', sans-serif", lineHeight: "36pt" }}>Enter your mobile number <br> and we will send you a text</div><br>

                    <div class="TransparentBox">

                        <input name="txtMobilePhone" type="text" id="txtMobilePhone" class="TransparentTextBox" numberformat-decimaldigits="0" placeholder="(___) ___-____" style={{ width: "90%" }}>

                        <div class="TransparentBoxArrow">

                           <a id="btnSubmitTxt" onclick="return SendSMS();" href="#"><img src="/images/black-arrow-right.png" width="60px" height="16px" style={{ marginTop: "10px" }}></a>

                        </div>

                    </div>

                </div>

                <div id="txloader" style={{ padding: "184px 0px", textAlign: "center", display: "none" }}>

                    <img src="/images/ajax-loader.gif">

                </div>

            </div>

            <div class="modal-footer">

                <div style="height:40px;">

                    &nbsp;

                </div>

                    

            </div>

        </div>

    </div>

</div>