Systems and methods for generating floating button interfaces on a web browser

Disclosed herein are a system and method for generating a floating button widget on a host web site. A popup widget may be generated and appear next to the floating button widget on the host website. The floating button widget is implemented via a code snippet integrated into a source code of the host web site. When the integrated code snippet is executed, an external call to an application programming interface (API) via the Internet is made and subsequently generates the floating button widget and/or popup widget on an interface (i.e., a web page) of the host web site.

TECHNICAL FIELD

This disclosure relates in general to a system and method for generating a widget.

BACKGROUND

The Internet enables a server computer system to send graphical web pages of information to a remote client computer system. The remote client computer system can display the web pages. Each web page can be uniquely identifiable by a Uniform Resource Locator (“URL”). When the server computer system receives a request specifying the URL for that web page, it sends that web page to the remote client computer system. The remote client computer system typically displays the web page using a browser. Web pages are typically defined using Hyper Text Markup Language (“HTML”), which provide a standard set of tags that define how a web page is to be displayed. When a user indicates to the browser to display a web page, the server computer system receives a request from the browser to transfer an HTML document that defines the web page to the remote client computer system. Upon the remote client computer system receiving the requested HTML document, the browser displays the web page as defined by the HTML document. The HTML document contains tags that control the displaying of text, graphics, and controls. The HTML document may contain tags that control the displaying of a static button (e.g., a clickable button) on the web page.

DETAILED DESCRIPTION

Various embodiments of the present disclosure now will be described more fully with reference to the accompanying drawings. Embodiments of the disclosure may include many different forms and should not be construed as limited to the embodiments set forth herein. These embodiments are intended to convey the scope of the disclosure to those skilled in the art. Furthermore, all “examples” given herein are intended to be non-limiting.

Components of a floating button system of the present disclosure can be implemented in software, firmware, hardware, or a combination thereof. In one embodiment of the disclosure, which is intended to be a non-limiting example, system components are implemented in software that is executed by a computer, for example, but not limited to, a personal computer, mainframe computer, workstation, etc. A floating button is a web interface button that does not shift around in response to the user shifting the core page (e.g., as with a scroll bar). In some embodiments, a floating button is adjustable independent of the core webpage. A floating button gives the appearance of “floating” over the core webpage. Static or “sticky” headers or footers are structured in the page source code specifically as headers/footers or navbars. The floating button is supplemental to the source, and the source code would function as a legible webpage independent of the floating button.

Floating buttons are distinct from static headers or footers (e.g., that similarly maintain position despite scrolling) in that static headers or footers are part of core structure of a webpage formatting and a floating button is not. Floating buttons are independent from the webpage formatting and structure.

An embodiment of the software-based system, which comprises an ordered listing of executable instructions for implementing logical functions, can be embodied in any computer readable medium for use by, or in connection with, an instruction execution system, apparatus, or device such as a computer-based system, processor-containing system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions. In the context of this document, a “computer readable medium” can be any means that can contain, store, communicate, or transport the program for use by or in connection with the instruction execution system, apparatus or device. The computer-readable medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device. More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic) having one or more wires, a portable computer diskette (magnetic), a random access memory (RAM) (magnetic), a read-only memory (ROM) (magnetic), an erasable programmable read-only memory (EPROM or Flash memory) (magnetic), an optical fiber (optical), and a portable compact disk read-only memory (CD ROM) (optical).

The floating button system allows rapid deployment of a web-based project site for an organization or any group, including an enterprise organization (e.g., a nonprofit organization). Embodiments of the floating button system provide a person (e.g., an administrator) to easily implement a “call to action” floating button interface on a web page. With very little web development skills, administrators of a web site can quickly customize their site to fit the needs of their project, project team, and leadership stakeholders.

In some embodiments, the floating button system of the present disclosure is implemented with use of a communication network, such as the Internet—although a private Intranet may also be used. As such, a brief description and explanation of terms associated with the Internet follow. A browser, or “web” browser, allows for simple graphical user interface (GUI) access to network servers, which support documents formatted as so-called web pages. The web is a collection of servers on the Internet that utilize a Hypertext Transfer Protocol (HTTP), which is an application protocol that provides users access to files (which can be in different formats such as text, graphics, images, sound, video, etc.) using a Standard Generalized Markup Language (SGML). SGML is an information management standard for providing platform-independent and application-independent documents that retain formatting, indexing, and linking information. SGML provides a grammar-like mechanism for users to define the structure of their documents and the tags they will use to denote the structure in individual documents. The page description language known as Hypertext Markup Language (HTML) is an application of SGML. HTML provides basic document formatting of text and images and allows the developer to specify hyperlinks, or “links”, to other servers and files.

Use of an HTML-compliant client, such as a web browser, involves specification of an address via a Uniform Resource Locator (URL). Upon such specification, the client makes a TCP/IP request to the server identified in the URL and receives a “web page” (namely, a document formatted according to HTML) in return.

By way of example and illustration,FIG. 1illustrates an Internet based system upon which one embodiment, among others, of the floating button system100of the present disclosure may be implemented. It should be noted that while the present disclosure provides implementation of the floating button system100within an Internet based system, the floating button system100need not be provided via use of the Internet. Instead, one of reasonable skill in the art will appreciate that the floating button system100may be implemented within other mediums, such as, for example, but not limited to, a local area network, or wide area network.

Referring toFIG. 1, a plurality of networks121a,121bare shown wherein each network121a,121bincludes multiple digital processors133a,135a,137a, and133b,135b,137b, respectively. Digital processors133a,133b,135a,135b,137a,137bmay include, but are not limited to, personal computers, mini computers, laptops, and the like. Each digital processor133a,133b,135a,135b,137a,137bmay be coupled to a host processor or server131a,131bfor communication among processors133a,133b,135a,135b,137a,137bwithin the specific corresponding network121a,121b.

According to an exemplary embodiment, the host processor or server131a,131bis coupled to a communication line141that interconnects or links the networks121a,121bto each other, thereby forming an Internet. As such, each of the networks121a,121bare coupled along the communication line141to enable access from a digital processor133a,135a,137aof one network121ato a digital processor133b,135b,137bof another network121b. Various user servers, of which a host user server139aand end-user server139bare shown as an example, are linked to the communication line141, thus providing users with access to the Internet. Various user devices, of which a host user device138aand end-user device138bare shown as an example, are linked to the host user server139aand end-user server139b, respectively. The host user device(s)138aand end-user device(s)138bcan be, but are not limited to, a server desktop, a desktop computer, a computer cluster, a mobile computing device such as a notebook, a laptop computer, a handheld computer, a mobile phone, a smartphone, a PDA, and/or an iPhone, etc.

According to an exemplary embodiment, a “floating button” web site110(and applications provided by the floating button web site110) and a landing page web site115(“landing page115”) may be maintained on a web server151that is connected to the Internet for communication among the various networks121a,121band/or digital processors133a,133b.135a,135b,137a,137b, an API server120and other users connected to the Internet via respective host user servers139aand end-user servers139b. In some embodiments, a “floating button” application105is maintained on the web server151that builds the floating button web site110and the landing page115on demand from a user.

The Internet can provide file transfer, remote log in, email, news, RSS, and other services through any known or convenient protocol, such as, but is not limited to the TCP/IP protocol, Open System Interconnections (OSI), FTP, UPnP, iSCSI, NSF, ISDN, PDH, RS-232, SDH, SONET, etc.

FIG. 2is a block diagram that further illustrates the web server151ofFIG. 1. As shown byFIG. 2, the web server151comprises a central processing unit (CPU)262having a look and feel processor264and floating button application105for building a floating button system implementing a floating button web site110. The look and feel processor264is capable of performing functionality required by the floating button system100, as described in detail hereinbelow. The web server151also comprises a web server database272, which holds data necessary to enable the web server151to customize a floating button site110and landing page115in accordance with settings or preferences associated with a particular user (e.g., administrator). It should be noted that other information may be stored within the web server database272, such as but not limited to information captured by the look and feel processor264

FIG. 3is a block diagram of one embodiment of a system300for accessing floating button web sites from the web server151. As shown inFIG. 3, the system300comprises general-purpose computers302,304,306that are coupled to a server310over a network such as the Internet320. The communication network320provides access to Internet services such as email, file transfer proto cols (FTP), WWW, Internet Relay Chat (IRC), etc. and newsgroups, such as Usenet, among others. The server310is coupled to a database315that stores information. For example, the information may include, but is not limited to, information inputted by a host user and/or end user, design information associated with the floating button site and/or landing page.

In some embodiments, the database315stores user data related to an end-user, including the end-user's social network, interactions (e.g., shares, invites, geo-data, ratings, donation history, etc.). The database315stores an algorithm for providing recommendations for donations to the end-user (e.g., a donor) based on the user data. User data are encrypted with security protocols (e.g., 3DES, AES, and RSA) to protect such information.

In the operating environment shown inFIG. 3, a user of a general-purpose computer306(or other computing device such as a personal digital assistant) attempts to access stored applications on the computer306and network services from the network320. As shown inFIG. 3, the general-purpose computer306includes a processor352, a network interface360, memory354, a local storage device358, and a bus356that permits communication between the various components. While not explicitly shown, it should be appreciated that the other computers302,304may also include similar components that facilitate computation or execution of applications on the computers302,304. In some embodiments, among others, the local storage device358is a hard drive configured to electronically store data. The local storage device358may also store computer programs that execute on the computer306. In this sense, the processor352is configured to access any program that is stored on the local storage device358, and execute the program with the assistance of the memory354.

The network interface360is configured to provide an interface between the general-purpose computer306and the network320. Thus, the network interface360provides the interface for the computer306to receive any data that may be entering from the network320and, also, to transmit any data from the computer306to the network320. Specifically, in some embodiments, the network interface360is configured to permit communication between each of the computers302,304,306and the server310and, additionally, to permit communication between the computers302,304,306themselves. In this regard, the network interface360may be a modem, a network card, or any other interface that communicatively couples each of the computers302,304,306to the network320. Since various network interfaces are known in the art, further discussion of these components is omitted here.

The memory354can include any one or combination of volatile memory elements (e.g., random access memory (RAM, such as DRAM, SRAM, etc.)) and nonvolatile memory elements (e.g., ROM, hard drive, tape, CD ROM, etc.). Moreover, the memory354may incorporate electronic, magnetic, optical, and/or other types of storage media. Note that the memory354can have a distributed architecture, where various components are situated remote from one another, but can be accessed by the processor352.

The software in memory354may include one or more separate programs, each of which comprises an ordered listing of executable instructions for implementing logical functions. In the example ofFIG. 3, the software in the memory354includes a web browser application380and an operating system (O/S)370. The operating system370controls the execution of other computer programs, and provides scheduling, input-output control, file and data management, memory management, and communication control and related services.

The I/O devices390may include input devices, for example but not limited to, a keyboard, mouse, Scanner, digital camera, multi-function device, digital sender, microphone, etc. Furthermore, the I/O devices390may also include output devices, for example but not limited to, a printer, display, etc. Finally, the I/O devices390may further include devices that communicate both inputs and outputs, for instance but not limited to, a modulator/demodulator (modem; for accessing another device, system, or network), a radio frequency (RF) or other transceiver, a telephonic interface, a bridge, a router, etc.

The software in the memory354may further include a basic input output system (BIOS) (omitted for simplicity). The BIOS is a set of software routines that initialize and test hardware at startup, start the O/S370, and support the transfer of data among the hardware devices. The BIOS is stored in ROM so that the BIOS can be executed when the computer306is activated.

When the computer306is in operation, the processor352is configured to execute software stored within the memory354, to communicate data to and from the memory354, and to generally control operations of the computer306pursuant to the software. The web browser380and the O/S370, in whole or in part, are read by the processor352, perhaps buffered within the processor352, and then executed.

Referring back toFIG. 1, within one embodiment of the floating button system100, a floating button application105is executed by the web server151. One function of the floating button application105is to generate one or more widgets on the floating button web site110. In some embodiments, another function of the floating button application105is to receive information that a user inputs via a browser. In some embodiments, the floating button application105generates the one or more widgets on the floating button web site110based on the received inputted information. In some embodiments, another function of the floating button application105is to generate the landing page115based on the received inputted information.

The widget is anything that can be embedded within a page of HTML, i.e. a web page. The widget adds some content to that page that is not static. The widgets can also be referred to as modules, snippets, and plug-ins. The widgets can be written in HTML, but also in JavaScript, Flash, Java, CSS, Python, SQL, PHP, and other programming languages that will be run when the page is called. The widget may include, but is not limited to, a floating button, a popup a lightbox, an alert and/or a web page overlay on a web page.

The widget can be integrated within the floating button web site110as browser objects by the placement/integration of a small snippet of code in a source code of the floating button web site110. When the integrated code snippet is executed, an external call to an application programming interface (API) via the Internet is made and subsequently generates the widget on an interface (i.e., web page) of the floating button web site110.

FIGS. 4A and 4Billustrate example interfaces of a floating button widget410(“floating button410”) and/or a popup widget420(“popup420”) on a floating button web page430(“web page430”). The web page430is an interface of the floating button web site110. The floating button410maintains a position within a region on the web page430independent from user page scroll commands. In some embodiments, the floating button410can be rectangular, circular, oblong, square, and/or any other suitable shape. In some embodiments, the floating button410includes transparent portions and/or non-transparent portions.

The floating button410may include a call to action message. For example, the call to action message may include, but not limited to, “DONATE” (as shown inFIGS. 4A and 4B), “VOLUNTEER,” “GIVE,” and/or “CONTRIBUTE.” The floating button410enables the collection of one-time and/or recurring donations from an end-user (e.g., a donor) via the floating button web site110, such as for a non-profit organization (NPO) and a donation campaign.

The popup420may be a lightbox overlayed on top of a portion of the web page430. The popup420maintains a position on web page430independent from user page scroll commands. The popup420can be rectangular, circular, oblong, square, and/or any other suitable shape. In some embodiments, the popup420includes transparent portions and/or non-transparent portions. The popup420may include content, such as a message. For example, the message may provide an overview and/or a highlight about an NPO's campaign. The popup420allows an administrator of the floating button website110to easily modify the content displayed on the web page430.

Referring toFIG. 5, the popup420may be invoked when the floating button410is selected. For example, an end-user may select the floating button410by “hovering” a cursor arrowhead above the floating button410. Hovering includes placing a cursor within a portion of the floating button410on a browser for a specified duration. For example, the specified duration can be 0.1 seconds, 0.5 seconds, 1 second, 2 seconds, 3 seconds, and/or any suitable amount of time. In a further example, the end-user interfacing the web page430on a smartphone may double tap a portion of the floating button410. The popup420may be displayed proximate to the floating button410on the web page430. For example, the web server151may display the popup420vertically above the floating button410. In other embodiments, the popup420may be displayed on the web page430without the need to be invoked by a user selection. For example, the popup420is displayed when the web page430is loaded onto the user's browser.

An end-user (e.g., a donor) may be presented the landing page115upon activating the floating button410or popup420. For example, the end-user may activate the floating button410or popup420by placing a cursor within a portion of the floating button410or popup420and clicking. In a further example, the end-user interfacing the web page430on a smartphone may single tap a portion of the floating button410or popup420. The landing page115may be loaded onto a new browser window and/or browser tab. For example, the landing page115may be retrieved from the web server151.

In some embodiments, a source code of the landing page may be substantially different than the source code of the floating button web site.

The landing page115displays information received from a host user (e.g., an administrator of the landing page115). For example, for a NPO's campaign, the landing page115may display campaign information including, but not limited to, details about an “ask” (a financial goal of the NPO's campaign), one or more goals (a target amount of money the NPO aims to raise for the campaign), a number of fundraising goals (e.g., one, two, three, four, etc.), a progress bar for each fundraising goal, and a description of each goal (e.g., explanation of what and how much can be accomplished for the NPO's campaign upon meeting goal). The floating button application105may receive information (e.g., campaign information) from the host user via an interface (e.g., web page) of the floating button application105. The floating button application105generates the landing page115to contain the information received from the host user.

The floating button application105receives design information and generates the landing page115styled according to the design information. Design information received may include criteria for the design of the landing page115. The design criteria may include visually perceptible assets. Visually perceptible assets may include, but are not limited to, text, colors and fonts of text and backgrounds, logos, images, media that is to be rendered in the final presentation to an end-user by way of a rendering and/or layout engine running on a computing device of the user device, layout, typographic and color scheme, banners, motifs, and other design assets of a website.

In some embodiments, the floating button application105receives design information from the host user. For example, the host user may input selections for each visually perceptible asset via an interface of the floating button application105. For example, the host user may individually indicate a layout, typographic and/or color scheme. In a further example, the host user may upload a logo of the host user's company/organization.

In some embodiments, the floating button application105includes a preset selection of visually perceptible assets. For example, the floating button application105may generate a preset selection of visually perceptible assets, including a preset layout, typographic and/or color scheme. The floating button application105generates the landing page115based on the preset selection.

In some embodiments, the floating button application105generates the landing page115based on a combination of the information received from the host user and the preset selection.

In some embodiments, visually perceptible assets are extracted from the host user's floating button web site110and incorporated into the landing page115. Extracted visually perceptible assets are also referred to hereinbelow as “look and feel elements.” Look and feel elements include, but are not limited to, logos, colors, page layout, navigation systems, frames, mouse-over effects, or other elements that are consistent through some or all of the host web site. This enables capturing and storing the look at feel of the host user's floating button web site110on the landing page115. For example, when an end-user (e.g., a donor) clicks on the floating button410and is served the landing page115, the landing page115should retain the host user's floating button web site110.

In some embodiments, a system for extracting, storing, and implementing the look and feel of the host user's floating button web site110on the landing page115includes the look and feel processor264, floating button application105, database272, and communication line141. The look and feel processor264captures the look and feel elements. The database272stores the look and feel elements. The communication line141connects the database272to the host user's floating button site110whose look and feel is to be captured.

In some embodiments, the look and feel of a host web site (e.g., the host user's floating button web site110) is captured and stored by receiving an identification of an example page of a target host web site. For example, the host user provides the URL of the web page of which the look and feel is to be replicated. The identified page is retrieved by the look and feel processor264. Look and feel elements of the page are identified/captured. These elements are stored in the database272for future use in generating outsourced transparent pages (e.g., landing pages115). Such pages give the viewer of the page the impression that she is viewing pages served by the host web site. This is accomplished by capturing the HTML text and images that comprise their look and feel and embed within it the landing page HTML content. Any relative URLs in the host web site's look and feel may be changed to absolute URLs back to the host web site.

In some embodiments, the look and feel elements of a target web page are identified using natural language processing (NLP). For example, the look and feel processor264uses NLP to identify meaning of titles and/or metadata associated with the look and feel elements. The title and/or metadata is used by the NLP to predict what the look and feel element is. For example, the title and/or metadata may include HTML tags of the target web page. Based on that prediction, the extraction processor decides whether the look and feel element is worth extracting. If extracted, the look and feel processor264decides where to place the look and feel element based on what the title and/or metadata.

In some embodiments, the look and feel elements of a target web page are identified using a heuristic. For example, an end-user can program a heuristic to identify meaning of titles and/or metadata associated with the look and feel elements. The title and/or metadata (e.g., HTML tags) is used by the heuristic to predict what the look and feel element is. A machine learning model makes the decision based on training data. For example, the model is shown a training data set. For example, the training data set can include, but is not limited to, a banner image file. In a further example, the banner image file includes a number of characteristics (e.g., size, name, position on page, metadata, etc.). The machine learning model then has a number of example banner images to compare to and identifies, based on the example banner images, the current file. For example, the number of example banner images can be 1 million, 2 million, and/or any suitable number.

In some embodiments, the floating button application105includes one or more donation features. The donation features include, but are not limited to, multiple goal setting, donation tiers, patron-to-peer giving, a digital community, and/or a messaging platform (e.g., users can leave positive messages in real-time).

In some embodiments, the donation tier feature displays information on the landing page115including, but not limited to, details on how the NPO benefits from each donation. Each donation tier contains a predetermined donation amount, a description outlining how the NPO intends to use the funds, and/or a donation frequency (e.g., a frequency that a donor donates to the NPOs and/or the NPOs campaign). For example, the donation frequency can be one-time and/or recurring (e.g., weekly, monthly, bi-monthly, and annually). The donor and/or the NPO can set the donation frequency.

In some embodiments, for the patron-to-peer giving feature, the floating button application105system generates a unique link associated with each unique donor. For example, the floating button application105generates a first link (e.g., a URL and QR code) for a first donor and a second link for a second donor. The donor may share their unique link to promote raising money for a campaign. A portion/section of the campaign's landing page may feature the donor. For example, the landing page115may display information related to the donor's identity (e.g., a name, photo, and profile description) and an amount raised through the donor. In some embodiments, the unique link associated with the unique donor is associated with a unique landing page. The unique link allows NPOs to effectively share their campaign. The unique link can be easily shared on platforms such as social media, newsletters (printed and/or digital), email, SMS text, and/or any other suitable messaging service.

In some embodiments, an end-user (e.g., a patron) of the end-user device138bcan be connected to another user (e.g., a peer) of another end-user device138bvia social networks including, but not limited to, Facebook, Instagram, TikTok, etc., an address book of the end user devices138b, and/or any other suitable means of connecting two users.

In some embodiments, the floating button system100integrates a payment system. For example, the floating button system100can integrate a third-party software (e.g., PayPal, Visa, IBM, Square, etc.) and/or an API from API server120. An exemplary benefit of the floating button system100is promoting accessibility of implementing a web-based donation feature, as a host user (e.g., an administrator of an NPO) needs to insert one or few code snippets to generate a floating button widget with a donation feature.

In some embodiments, a unique receipt (e.g., a tax receipt) is generated and delivered to the donor at the completion of each donation transaction. The unique receipt may be delivered digitally, such as via email, text, and/or any other suitable methods. The unique receipt may be delivered via traditional means, such as mail.

FIG. 6is flowchart illustrating a process600of executing a floating button application. In step602, a web server executes a code snippet that is integrated into a source code of a host web site (i.e., a floating button web site). The code snippet is configured to execute an external call to an API via the Internet. In some embodiments, the code snippet is configured to generate a region for applying graphics. In step604, the web server executes the external call to the API. In step606, the external call to the API modifies a host web page of the host web site and generates a floating button widget (“floating button”) on an interface of the host web page. Information called by selecting the floating button is not included in the host source code. In step608, the web server generates a landing page. In some embodiments, the web server generates a page overlay.

Continuing withFIG. 6, in decision block610, the web server detects if the floating button is activated. Activating the floating button includes placing a cursor arrowhead over the floating button. If the web server detects the cursor arrowhead over the floating button, the process proceeds to decision block612.

Continuing withFIG. 6, in decision block612, the web server detects if the floating button is activated. Activating the floating button includes placing a cursor arrowhead over the floating button. If the web server detects a cursor arrowhead over the floating button, the process proceeds to decision block614.

Continuing withFIG. 6, in decision block612, the web server detects if the floating button is clicked. If the web server detects the cursor arrowhead over the floating button but the floating button is not clicked (i.e., the cursor arrowhead is hovering over the floating button), the process proceeds to step614. In some embodiments, if the web server detects a tapping of the floating button, the process600proceeds to step614. For example, on a smartphone and/or tablet, an end-user may double tap the floating button, which is equivalent to hovering a cursor arrowhead over the floating button on a computer web browser. In step614, the web server displays a popup widget on an interface of the host web page.

Continuing withFIG. 6, if the web server detects a cursor arrowhead over the floating button and the floating button is clicked, the process600proceeds to step616. In step616, the web server opens a landing page. For example, the web server opens the landing page in a new web browser window. In some embodiments, the web server redirects to the landing page. For example, the web server opens the landing page on the same web browser window, replacing the current host web page. In some embodiments, the web server displays the page overlay over the current host web page.

Continuing withFIG. 6, at decision block610, if the web server does not detect the activation of the floating button, the process proceeds to step618. In step618, the web server remains on the current host web page.

FIG. 7is a flowchart illustrating a process700of executing a floating button application. In step702, a web server executes a code snippet that is integrated into a source code of a host web site (i.e., a floating button web site). The code snippet is configured to execute an external call to an API via the Internet. In some embodiments, the code snippet is configured to generate a region for applying graphics. In step704, the web server executes the external call to the API. In step706, the external call to the API modifies a host web page of the host web site and generates a floating button widget (“floating button”) on an interface of the host web page. Information called by selecting the floating button is not included in the host source code.

Continuing withFIG. 7, in step708, the floating button application extracts visually perceptible assets (i.e., look and feel elements) from one or more host web pages of the host web site. In step710, the web server generates a landing page having a look and feel of the host web site by including the extracted visually perceptible assets from the host web site. In some embodiments, the web server generates a page overlay having a look and feel of the host web site by including the extracted visually perceptible assets from the host web site.

Continuing withFIG. 7, in decision block712, the web server detects if the floating button is activated. Activating the floating button includes placing a cursor arrowhead over the floating button. If the web server detects a cursor arrowhead over the floating button, the process700proceeds to decision block714.

Continuing withFIG. 7, in decision block714, the web server detects if the floating button is clicked. If the web server detects the cursor arrowhead over the floating button but the floating button is not clicked (i.e., the cursor arrowhead is hovering over the floating button), the process proceeds to step716. In some embodiments, if the web server detects a tapping of the floating button, the process proceeds to step716. For example, on a smartphone and/or tablet, an end-user may double tap the floating button, which is equivalent to hovering a cursor arrowhead over the floating button on a computer web browser. In step716, the web server displays a popup widget on an interface of the host web page.

Continuing withFIG. 7, if the web server detects the cursor arrowhead over the floating button and the floating button is clicked, the process700proceeds to step718. In step718, the web server opens a landing page with the look and feel of the host web page. For example, the web server opens the landing page in a new web browser window. In some embodiments, the web server redirects to the landing page with the look and feel of the host web page. For example, the web server opens the landing page on the same web browser window, replacing the current host web page. In some embodiments, the web server displays the page overlay having the look and feel of the host web page over the current host web page.

Continuing withFIG. 7, at decision block712, if the web server does not detect the activation of the floating button, the process700proceeds to step720. In step720, the web server remains on the host webpage.

FIG. 8is a flowchart illustrating a process800by which a host user interacts with a floating button system. For example, the host user can be an administrator of a host web site for an NPO. In step802, the host user signs up to integrate the floating button system on a host web site. For example, the host user can sign up via a web browser.

Continuing withFIG. 8, in step804, the host user customizes a widget (e.g., a floating button widget and popup widget). In some embodiments, the host user customizes a landing page. In some embodiments, the host user customizes a page overlay. In some embodiments, the host user selects whether to include the floating button widget, popup widget, landing page, and/or page overlay. The host user provides details to a floating button application for displaying on the widget, landing page, and/or page overlay. For example, the administrator of the NPO may provide details about the NPO's campaign (e.g., a donation ask and goal).

Continuing with step804ofFIG. 8, in some embodiments, the host user may input selections for visually perceptible assets. For example, the host user may select a color and typographic scheme and upload a logo and images. In some embodiments, the host user may select a preset selection of visually perceptible assets. In some embodiments, the host user may select to have the visually perceptible assets extracted from the host web site.

Continuing withFIG. 8, in step806, the host user receives a code snippet generated by the floating button system. In step808, the host user integrates the code snippet into a source code of the host web site.

Current solutions for online transactions and donations are expensive and time consuming to implement and are ineffective at promoting recurring donations. For example, many charities and NPOs do not have the technical expertise necessary to accept and process donations online. Implementing a solution to process donations online typically requires creating a custom website with a secure payment checkout system that reliably and safely processes end-user donations. Creating the custom web site can be expensive and time consuming, generally requiring designers to lay out the web site, coders to develop the web site, and implementing a solution for accepting and processing transactions. Solutions that enable the ability to process a transaction via implementation of a short code snippet into a host web site do not have a donation component that provides highlights of an ask. These solutions are purely transactional. Consequently, many charities may miss out on web-based/online donations. Further, NPOs seeking online donations may rely on crowdfunding web sites. However, these crowdfunding web sites can take a significant percentage of the donations processed and are ineffective for ongoing or recurring donations. In addition, crowdfunding web sites drive a donor away from the NPO's web site and onto the crowdfunding web site where the donor may be lost or distracted by another need.

Unless contrary to physical possibility, it is envisioned that (i) the methods/steps described above may be performed in any sequence and/or in any combination, and that (ii) the components of respective embodiments may be combined in any manner.

The techniques introduced above can be implemented by programmable circuitry programmed/configured by software and/or firmware, or entirely by special-purpose circuitry, or by a combination of such forms. Such special-purpose circuitry (if any) can be in the form of, for example, one or more application-specific integrated circuits (ASICs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), etc.

Physical and functional components (e.g., devices, engines, modules, and data repositories, etc.) associated with processing device400can be implemented as circuitry, firmware, software, other executable instructions, or any combination thereof. For example, the functional components can be implemented in the form of special-purpose circuitry, in the form of one or more appropriately programmed processors, a single board chip, a field programmable gate array, a general-purpose computing device configured by executable instructions, a virtual machine configured by executable instructions, a cloud computing environment configured by executable instructions, or any combination thereof. For example, the functional components described can be implemented as instructions on a tangible storage memory capable of being executed by a processor or other integrated circuit chip (e.g., software, software libraries, application program interfaces, etc.). The tangible storage memory can be computer readable data storage. The tangible storage memory may be volatile or nonvolatile memory. In some embodiments, the volatile memory may be considered “non-transitory” in the sense that it is not a transitory signal. Memory space and storages described in the figures can be implemented with the tangible storage memory as well, including volatile or nonvolatile memory.

Note that any and all of the embodiments described above can be combined with each other, except to the extent that it may be stated otherwise above or to the extent that any such embodiments might be mutually exclusive in function and/or structure.